Selector de emojis

Emoji Picker es una solución de IU que ofrece un aspecto moderno, emojis actualizados y facilidad de uso. Los usuarios pueden explorar y seleccionar emojis y sus variantes, o elegir entre los que se usaron recientemente.

Figura 1: Selector de emojis

Con esta biblioteca, las apps de una variedad de fuentes pueden proporcionar una experiencia de emojis inclusiva y unificada a sus usuarios sin que los desarrolladores tengan que crear y mantener su propio selector de emojis desde cero.

Funciones

Emojis actualizados

Los emojis nuevos se incluyen de forma selectiva en el selector de emojis. La biblioteca del selector de emojis es compatible con varias versiones y dispositivos de Android.

Variantes fijas

Mantén presionado un emoji para que se muestre un menú de variantes, como diferentes géneros o tonos de piel. La variante que elijas se guardará en el selector de emojis, y la última variante se usará en el panel principal.

Con esta función, los usuarios pueden enviar sus variantes de emojis preferidas con solo presionar una vez.

variantes de emojis
Figura 2: Variantes de emojis

Emoji reciente

emoji reciente
Figura 3: Emojis recientes

El RecentEmojiProvider se encarga de proporcionar emojis en la categoría Usados recientemente. La biblioteca tiene un proveedor de emojis reciente predeterminado que satisface el caso de uso más común:

  • Todos los emojis seleccionados se guardan por app en las preferencias compartidas.
  • El selector muestra, como máximo, 3 filas de emojis seleccionados, sin duplicados, en orden cronológico inverso.

Si este comportamiento predeterminado es suficiente, no necesitas usar setRecentEmojiProvider().

Sin embargo, es posible que debas personalizar el comportamiento del proveedor. Estos son algunos casos comunes:

  • Si quieres almacenar diferentes emojis seleccionados por cuenta de usuario
  • Si quieres usar un almacenamiento de datos en lugar de preferencias compartidas.
  • Quieres mostrar los emojis recientes ordenados por frecuencia.

Luego, puedes implementar la interfaz RecentEmojiProvider y configurarla con setRecentEmojiProvider().

Compatibilidad con EmojiCompat

Si se habilita, se usa una instancia de EmojiCompat en el selector de emojis para renderizar la mayor cantidad de emojis posible. Sin embargo, el selector de emojis no requiere EmojiCompat.

Requisitos previos

Tu app debe orientarse a Android 5.0 (nivel de API 21) o versiones posteriores.

Cómo usar la biblioteca

  1. Importa androidx.emoji2:emojipicker:$version en el archivo build.gradle de tu app.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Aumenta la vista del selector de emojis y, de manera opcional, configura emojiGridRows y emojiGridColumns.

    • El número predeterminado de emojiGridColumns es 9.
    • El recuento de filas se calcula en función de la altura de la vista superior y el valor de emojiGridColumns.
    • Usa un valor flotante para emojiGridRows a fin de indicar que el usuario puede desplazarse hacia abajo para ver más 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. Utiliza setOnEmojiPickedListener() para agregar los emojis seleccionados a una vista. Por ejemplo, para anexar los datos a un EditText, haz lo siguiente:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. De manera opcional, configura RecentEmojiProvider; consulta la app de ejemplo para ver una implementación de ejemplo.

  5. Personaliza los diseños (opcional). Crea tu propio diseño para anular los atributos comunes del tema y aplicar el diseño a EmojiPickerView. Por ejemplo, anular colorControlNormal cambia el color del ícono de categoría.

    <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 ejemplo

En la app de ejemplo del selector de emojis, se muestran casos de uso básicos junto con las siguientes situaciones adicionales:

  • Nuevo cálculo de diseño cuando se restablecen emojiGridRows o emojiGridColumns
  • Un proveedor de emojis reciente anulado que ordena por frecuencia.
  • Personalización adicional del estilo.