Unicode actualiza anualmente el conjunto estándar de emojis, ya que el uso de emojis aumenta con rapidez en todo tipo de apps.
Si tu app muestra contenido de Internet o proporciona entrada de texto, te recomendamos encarecidamente que admitas las fuentes de emojis más recientes. De lo contrario, los emojis posteriores podrían mostrarse como un cuadro cuadrado pequeño llamado tofu (visional) o bien otras secuencias de emojis renderizadas de forma incorrecta.
Las versiones de Android 11 (nivel de API 30) y versiones anteriores no pueden actualizar la fuente de emojis, por lo que las apps que los muestran en esas versiones deben actualizarse de forma manual.
Los siguientes son ejemplos de emojis modernos.
Ejemplos | Versión |
---|---|
🫠 🫱🏼🫲🏿 🫰🏽 | 14.0 (septiembre de 2021) |
😶🌫️ 🧔🏻♀️ 🧑🏿❤️🧑🏾 | 13.1 (septiembre de 2020) |
🥲 🥷🏿 🐻❄️ | 13.0 (marzo de 2020) |
🧑🏻🦰 🧑🏿🦯 👩🏻🤝👩🏼 | 12.1 (octubre de 2019) |
🦩 🦻🏿 👩🏼🤝👩🏻 | 12.0 (febrero de 2019) |
En BoM de marzo de 2023 (Compose UI 1.4), se admite la versión de emojis más reciente, incluida la retrocompatibilidad con versiones anteriores de Android hasta la API 21.
Esta compatibilidad no requiere cambios en tu app: Si usas Text
y TextField
(Material 2 o Material 3) o BasicText
y BasicTextField
, puedes obtener compatibilidad con emojis moderna lista para usar.
La mejor manera de probar los emojis más recientes en tu app es usando un dispositivo real en el nivel de API 30 o versiones anteriores.
Si usas una solución de emojis personalizados o si necesitas inhabilitar la resolución de emojis predeterminada en Compose por cualquier otro motivo, puedes usar PlatformTextStyle(emojiSupportMatch)
:
Text( text = "Hello $EMOJI_TEXT", style = TextStyle( platformStyle = PlatformTextStyle( emojiSupportMatch = EmojiSupportMatch.None )/* ... */ ) )
Interoperabilidad
Si tu app usa Views y Compose en el mismo Activity
, asegúrate de usar las APIs adecuadas para configurar emojis correctamente. En las siguientes secciones, se describe cuándo usar cada API.
Extensión desde ComponentActivity
Si tu Activity
se extiende desde Compose ComponentActivity
en lugar de AppCompatActivity
, sigue las instrucciones de Cómo admitir emojis sin AppCompat.
Dado que no extenderás AppCompatActivity
, agrega la biblioteca de Emoji2 a tus dependencias y usa EmojiTextView
en tus vistas en lugar del widget TextView
, como se muestra en el siguiente fragmento:
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view) emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT) val composeView: ComposeView = findViewById(R.id.compose_view) composeView.apply { setContent { // compose code } } } }
Luego, haz lo siguiente en tu archivo XML:
<androidx.emoji2.widget.EmojiTextView android:id="@+id/emoji_text_view" android:layout_width="match_parent" android:layout_height="wrap_content" />
Extensión desde AppCompatActivity
Si tu Activity
se extiende desde AppCompatActivity
, puedes usar ComposeView
para llamar a funciones de componibilidad. Los emojis se renderizan correctamente en las versiones de Android cuando usas elementos componibles de texto.
Si vas a extender desde AppCompatActivity
, aumenta TextView
desde XML para que los emojis se rendericen correctamente.
Esto se aplica si aumentas el XML:
- fuera de
ComposeView
, en laActivity
. Observa el uso deAppCompatActivity
yTextView
en el siguiente fragmento:
class MyActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val emojiTextView: TextView = findViewById(R.id.emoji_text_view) emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT) val composeView: ComposeView = findViewById(R.id.compose_view) composeView.apply { setContent { // compose code } } } }
- dentro de
ComposeView
, mediante la vinculación de vistas conAndroidViewBinding
, como en el siguiente fragmento:
class MyActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView( ComposeView(this).apply { setContent { Column { Text(EMOJI_TEXT) AndroidViewBinding(ExampleViewBinding::inflate) { emojiTextView.text = EMOJI_TEXT } } } } ) } }
Para aumentar un texto con AndroidView
dentro de ComposeView
, usa AppCompatTextView
para renderizar emojis de manera correcta:
class MyActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView( ComposeView(this).apply { setContent { Column { Text(EMOJI_TEXT) AndroidView( factory = { context -> AppCompatTextView(context) }, update = { it.text = EMOJI_TEXT } ) } } } ) } }
Consulta la documentación de las APIs de interoperabilidad para obtener más detalles.
Solución de problemas
Si ves tofu (visional) en lugar del emoji, primero verifica si el problema es tu dispositivo de prueba específico. Puedes verificar algunos aspectos importantes:
- Es posible que estés usando un dispositivo actualizado recientemente o un emulador nuevo. Si es posible, prueba con otro dispositivo de prueba real que uses con frecuencia y en el que hayas accedido a tu Cuenta de Google. Recuerda que la API debe ser 30 o inferior para garantizar que los emojis funcionen en las versiones correctas.
- El teléfono de prueba no admite fuentes descargables.
- Verifica la versión correcta de los Servicios de Google Play.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado.
- Otras consideraciones
- Texto en Compose
- Desplazamiento