Mostrar emojis

O conjunto padrão de emojis é atualizado anualmente pelo Unicode, já que 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.

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

Confira a seguir alguns 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 mais antigas do Android até a API 21.

Esse suporte não requer mudanças no app. Se você usar Text e TextField (Material 2 ou Material 3) ou BasicText e BasicTextField, vai ter suporte a emojis modernos de fábrica.

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

Se você estiver usando uma solução de emoji personalizada ou precisar desativar a resolução padrão de emoji 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 visualizações e o Compose na mesma Activity, verifique se você está usando 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 for estendido do Compose ComponentActivity em vez de AppCompatActivity, siga as instruções Oferecer suporte a emojis sem a AppCompat.

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

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 se estende de AppCompatActivity, use ComposeView para chamar funções combináveis. Os emojis são renderizados corretamente nas versões do Android quando você usa elementos combináveis de texto.

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

Isso se aplica se você estiver inflando o XML:

• fora de ComposeView, em 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

• dentro de ComposeView, usando a vinculação de visualização com AndroidViewBinding, como no snippet abaixo:

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ê vir um tofu (☐) em vez do emoji, primeiro verifique se o problema está no dispositivo de teste específico. Há alguns pontos principais que você pode verificar:

• Talvez você esteja usando um dispositivo com uma atualização recente ou um novo emulador. Se possível, tente outro dispositivo de teste real que você usa com frequência e que esteja conectado à sua Conta do Google. Lembre-se de que a API precisa ser 30 ou anterior para garantir que os emojis funcionem nas versões corretas.
• O smartphone de teste não tem suporte a fontes para download.
• Confira a versão correta do Google Play Services.