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 as variantes deles 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 emoji inclusiva e unificada aos usuários sem que os desenvolvedores precisem criar e manter o próprio seletor de emoji do zero.

Recursos

O Emoji Picker tem os seguintes recursos:

Emojis atualizados

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

Variantes fixas

Toque e pressione um emoji 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 de emoji preferidas com um toque.

variantes de emoji
Figura 2. Variantes de emoji.

Emojis recentes

emoji recente
Figura 3. Emojis recentes.

O RecentEmojiProvider é responsável por fornecer emojis na categoria Usuários recentes. A biblioteca tem um provedor de emoji 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, sem duplicações, 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 emojis selecionados diferentes por conta de usuário.
  • Você quer usar o armazenamento de dados em vez das preferências compartilhadas.
  • Você quer mostrar os emojis recentes classificados por frequência.

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

Seletor de direção

A partir do Emoji 15.1, o seletor de emojis oferece suporte a emojis bidirecionais. Os usuários podem tocar no seletor bidirecional para alternar entre as versões do emoji voltadas para a esquerda e para a direita.

emoji de seta para a esquerda bidirecional

Figura 4. Emoji bidirecional virado para a esquerda.

emoji de seta para a direita bidirecional

Figura 5. Emoji bidirecional virado para a direita.

Seletor de emojis para várias pessoas

Os usuários podem tocar e pressionar casais de emojis para revelar seleções de emojis com várias pessoas.

toque e pressione o emoji de casal

Figura 6. Toque e pressione um casal de emojis para revelar as seleções de emojis de várias pessoas.

toque no emoji da pessoa à esquerda

Figura 7. Selecione um emoji de pessoa com a metade esquerda.

toque no emoji de pessoa à direita

Figura 8. Selecione um emoji de pessoa com a metade direita.

Quando o usuário seleciona a metade esquerda ou direita de um casal de emoji, o seletor mostra uma visualização no canto inferior direito, como mostrado nas figuras 7 e 8. Depois de selecionar as duas metades do casal de emojis, os usuários podem selecionar a visualização para compor o casal de emojis personalizado.

Compatibilidade com EmojiCompat

Se ativada, uma instância EmojiCompat é usada no seletor de emojis para renderizar o maior número possível de emojis. No entanto, o Seletor de emoji não exige EmojiCompat.

Pré-requisitos

O app precisa segmentar o 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. Infle a visualização do seletor de emojis e, opcionalmente, 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 de ponto flutuante para emojiGridRows para indicar que o usuário pode rolar para ver 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 o emoji selecionado 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. Opcionalmente, defina RecentEmojiProvider. Consulte o app de exemplo para conferir um exemplo de implementação.

  5. Personalizar estilos, se quiser. Crie seu próprio estilo para substituir atributos de tema comuns e aplique o estilo ao EmojiPickerView. Por exemplo, modificar 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 do seletor de emojis demonstra casos de uso básicos, além dos seguintes cenários:

  • Recalculo do layout quando emojiGridRows ou emojiGridColumns são redefinidos.
  • Um provedor de emoji recente substituído que classifica por frequência.
  • Personalização de estilo adicional.