Seletor de emojis

O seletor de emojis é uma solução de interface que oferece uma aparência moderna, emojis atualizados e facilidade de uso. Os usuários podem procurar e selecionar emojis e suas variantes ou escolher entre os emojis usados recentemente.

Figura 1. Seletor de emojis

Com essa biblioteca, apps de várias fontes podem oferecer uma experiência de emojis inclusiva e unificada aos usuários sem que os desenvolvedores precisem criar e manter um seletor de emojis do zero.

Recursos

Emojis atualizados

Os emojis recém-lançados são incluídos de forma seletiva no seletor de emojis. A biblioteca Emoji Picker é compatível com várias versões e dispositivos Android.

Variantes fixas

Toque em um emoji e mantenha-o pressionado para mostrar um menu de variantes, como diferentes gêneros ou tons de pele. A variante escolhida é salva no seletor de emojis, e a última variante selecionada é usada no painel principal.

Com esse recurso, os usuários podem enviar as variantes preferidas de emojis com um toque.

variantes de emojis
Figura 2. Variantes de emoji

Emoji recente

emoji recente
Figura 3. Emojis recentes

O RecentEmojiProvider é responsável por fornecer emojis na categoria Usados recentemente. A biblioteca tem um provedor de emojis recente padrão que atende ao caso de uso mais comum:

  • Todos os emojis selecionados são salvos por app nas preferências compartilhadas.
  • O seletor mostra no máximo três linhas de emojis selecionados, com duplicação eliminada, em ordem cronológica inversa.

Se esse comportamento padrão for suficiente, não será necessário usar setRecentEmojiProvider().

No entanto, talvez seja necessário personalizar o comportamento do provedor. Confira alguns cenários comuns:

  • Você quer armazenar diferentes emojis selecionados por conta de usuário.
  • Você quiser usar o armazenamento de dados diferente das preferências compartilhadas.
  • Você quer mostrar os emojis recentes classificados por frequência.

Em seguida, implemente a interface RecentEmojiProvider e configure-a usando setRecentEmojiProvider().

Compatibilidade com EmojiCompat

Se ativada, uma instância EmojiCompat será usada no seletor de emojis para renderizar o maior número possível de emojis. No entanto, o seletor de emojis não requer EmojiCompat.

Pré-requisitos

Seu app precisa ser direcionado ao Android 5.0 (nível 21 da API) ou versões mais recentes.

Usar a biblioteca

  1. Importe androidx.emoji2:emojipicker:$version no arquivo build.gradle do app.

    dependencies {
    implementation "androidx.emoji2:emojipicker:$version"
}

  2. Aumente a visualização do seletor de emojis e, se quiser, defina emojiGridRows e emojiGridColumns.

    • O número padrão de emojiGridColumns é 9.
    • A contagem de linhas é calculada com base na altura da visualização mãe e no valor de emojiGridColumns.
    • Use um valor flutuante para emojiGridRows, indicando que o usuário pode rolar a tela para baixo para acessar mais emojis.
    <androidx.emoji2.emojipicker.EmojiPickerView
    android:id="@+id/emoji_picker"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:emojiGridColumns="9" />

    val emojiPickerView = EmojiPickerView(context).apply {
    emojiGridColumns = 15
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )
}

findViewById<ViewGroup>(R.id.emoji_picker_layout).addView(emojiPickerView)

  3. Use setOnEmojiPickedListener() para anexar os emojis selecionados a uma visualização. Por exemplo, para anexar a um EditText, faça o seguinte:

    emojiPickerView.setOnEmojiPickedListener {
    findViewById<EditText>(R.id.edit_text).append(it.emoji)
}

  4. Defina RecentEmojiProvider (opcional). Consulte o app de exemplo para um exemplo de implementação.

  5. É possível personalizar estilos. Crie seu próprio estilo para substituir atributos de tema comuns e aplique o estilo à EmojiPickerView. Por exemplo, substituir colorControlNormal muda a cor do ícone da categoria.

    <style name="CustomStyle" >
    <item name="colorControlNormal">#FFC0CB</item>
</style>
<androidx.emoji2.emojipicker.EmojiPickerView
    android:id="@+id/emoji_picker"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/CustomStyle"
    app:emojiGridColumns="9" />

App de exemplo

O app de exemplo seletor de emojis (em inglês) demonstra casos de uso básicos e outros cenários:

  • Recálculo de layout quando emojiGridRows ou emojiGridColumns são redefinidos.
  • Um provedor de emojis recente substituído que faz a classificação por frequência.
  • Personalização adicional de estilo.