Mostrar emojis

O conjunto padrão de emojis é atualizado anualmente pelo Unicode (link em inglês), e o uso de emojis está aumentando rapidamente para todos os tipos de apps.

Caso seu app mostre conteúdo da Internet ou permita a entrada de texto, recomendamos que você ofereça suporte para as fontes de emojis mais recentes. Caso contrário, emojis mais recentes poderão ser mostrados como um pequeno quadrado chamado de tofu (☐) ou outras sequências de emojis renderizadas incorretamente.

O Android 11 (API de nível 30) e versões anteriores não podem atualizar a fonte de emojis, então os apps que os exibem nessas versões precisam ser atualizados manualmente.

Confira a seguir alguns exemplos de emojis modernos.

Exemplos Versão
🫩 🪉 🇨🇶 16.0 (setembro de 2024)
🐦‍🔥 🧑‍🧑‍🧒‍🧒 👩🏽‍🦽‍➡️ 🇲🇶 15.1 (setembro de 2023)
🩷 🫸🏼 🐦‍⬛ 15.0 (setembro de 2022)
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (setembro de 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (setembro de 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (março de 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (outubro de 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (fevereiro de 2019)

O BOM de março de 2023 (Compose UI 1.4) oferece suporte à versão mais recente de emojis, incluindo compatibilidade com versões anteriores do Android até a API 21.

Esse suporte não exige mudanças no app. Se você usa Text e TextField (Material 2 ou Material 3) ou BasicText e BasicTextField, você recebe suporte moderno a emojis sem precisar fazer nada.

A melhor maneira de testar os emojis mais recentes no seu app é usando um dispositivo real com a API 30 ou versões anteriores.

Se você estiver usando uma solução de emoji personalizada ou precisar desativar a resolução de emoji padrão no Compose por qualquer outro motivo, use PlatformTextStyle(emojiSupportMatch):

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)
EmojiSnippets.kt

Interoperabilidade

Se o app usar Views e Compose no mesmo Activity, use as APIs adequadas para configurar os emojis corretamente. As seções a seguir descrevem quando usar cada API.

Extensão de ComponentActivity

Se o Activity estender o ComponentActivity do Compose em vez de AppCompatActivity, siga as instruções em Oferecer suporte a emojis sem a AppCompat.

Como você não está estendendo AppCompatActivity, adicione a biblioteca Emoji2 às suas dependências e use EmojiTextView nas suas visualizações em vez do widget TextView, conforme mostrado no snippet a seguir:

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
            }
        }
    }
}
EmojiSnippets.kt

Em seguida, no arquivo XML:

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
example_view.xml

Extensão de AppCompatActivity

Se o Activity herdar de AppCompatActivity, use ComposeView para chamar funções combináveis. Os emojis são renderizados corretamente em todas as versões do Android quando você usa elementos combináveis de texto.

Se você estiver estendendo de AppCompatActivity, faça a inclusão de TextView do XML para que os emojis sejam renderizados corretamente.

Isso se aplica se você estiver inflacionando o XML:

  • fora de ComposeView, no Activity. Observe o uso de AppCompatActivity e TextView no snippet a seguir:

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
            }
        }
    }
}
EmojiSnippets.kt

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
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

Para inflar um texto com AndroidView dentro de ComposeView, use AppCompatTextView para renderizar emojis corretamente:

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 }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

Consulte a documentação das APIs de interoperabilidade para mais detalhes.

Solução de problemas

Se você estiver vendo um tofu (☐) em vez do emoji, primeiro verifique se o problema é o dispositivo de teste específico. Confira alguns pontos principais: