Mostrar emojis

O conjunto padrão de emojis é atualizado anualmente pelo Unicode, já que o uso de emojis está aumentando rapidamente em todos os tipos de apps.

Se o app mostra conteúdo da Internet ou oferece entrada de texto, recomendamos que ele seja compatível com as fontes de emoji mais recentes. Caso contrário, os emojis mais recentes podem ser exibidos como uma pequena caixa quadrada chamada tofu (☐) ou outras sequências de emojis renderizadas incorretamente.

As versões do Android 11 (nível 30 da API) e anteriores não podem atualizar a fonte de emoji. Por isso, os apps que as mostram nessas versões precisam ser atualizados manualmente.

Veja a seguir exemplos de emojis modernos.

A 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, o suporte a emojis modernos é oferecido automaticamente.

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

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 usa visualizações e o Compose no mesmo Activity, use as APIs adequadas para configurar os emojis corretamente. As seções a seguir descrevem quando usar cada API.

Estendendo de ComponentActivity

Se o Activity se estender do Compose ComponentActivity em vez de AppCompatActivity, siga as instruções em Oferecer suporte a emojis sem 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

Estendendo de AppCompatActivity

Se o Activity se estender 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 de texto que podem ser compostos.

Se você estiver estendendo de AppCompatActivity, infle TextView do XML para que os emojis sejam renderizados corretamente.

Isso se aplica se você estiver inflando 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

• em ComposeView, pela vinculação de visualizações usando AndroidViewBinding, como no snippet a seguir:

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 tofu (☐) em vez do emoji, primeiro verifique se o problema é seu dispositivo de teste específico. Confira alguns pontos principais:

• Você pode estar usando um dispositivo atualizado recentemente ou um novo emulador. Se possível, tente usar outro dispositivo de teste real que você usa com frequência e que esteja conectado à sua Conta do Google. A API precisa ser 30 ou anterior para garantir que os emojis funcionem nas versões corretas.
• O smartphone de teste não é compatível com fontes para download.
• Verifique a versão correta do Google Play Services.