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 um dos 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 para os usuários, sem que os desenvolvedores precisem criar e manter o próprio seletor de emojis do zero.

Recursos

Emojis atualizados

Os novos emojis são incluídos de forma seletiva no seletor de emojis. A biblioteca de seletor de emojis é compatível com várias versões e dispositivos do Android.

Variantes fixas

Toque e mantenha pressionado 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 que preferirem 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 Usados recentemente. A biblioteca tem um provedor padrão de emojis recente 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ções eliminadas, em ordem cronológica inversa.

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

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

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

Em seguida, você pode implementar a interface RecentEmojiProvider e defini-la usando setRecentEmojiProvider().

Compatibilidade com EmojiCompat

Se ativada, uma instância de EmojiCompat é usada no seletor de emojis para renderizar o maior número possível de emojis. No entanto, o seletor de emojis não exige 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. Infle 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 para indicar que o usuário pode rolar para baixo 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 os emojis selecionados a uma visualização. Por exemplo, para anexar a uma EditText, faça o seguinte:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Se quiser, defina RecentEmojiProvider. Consulte o app de exemplo para conferir um exemplo de implementação.

  5. Personalize os estilos como opção. Crie seu próprio estilo para substituir atributos de tema comuns e aplicar 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 do seletor de emojis (link em inglês) demonstra casos de uso básicos com os seguintes cenários adicionais:

  • Recálculo de layout quando emojiGridRows ou emojiGridColumns são redefinidos.
  • Um provedor de emojis recente modificado que classifica por frequência.
  • Mais personalização de estilo.