Afficher les emoji

L'ensemble standard d'emoji est actualisé chaque année par Unicode, car leur utilisation augmente rapidement pour tous les types d'applications.

Si votre application affiche du contenu Internet ou permet la saisie de texte, nous vous recommandons vivement d'être compatible avec les dernières polices d'emoji. Sinon, les emoji ultérieurs peuvent s'afficher sous la forme d'un petit carré appelé tofu (☐) ou d'autres séquences d'emoji mal affichées.

Les versions d'Android 11 (niveau d'API 30) et antérieures ne peuvent pas mettre à jour la police d'emoji. Les applications qui les affichent sur ces versions doivent donc être mises à jour manuellement.

Voici quelques exemples d'emoji modernes.

BOM mars 2023 (Compose UI 1.4) est compatible avec la dernière version d'emoji, y compris la rétrocompatibilité avec les anciennes versions d'Android jusqu' à l'API 21.

Cette compatibilité ne nécessite aucune modification de votre application : si vous utilisez Text et TextField (Material 2 ou Material 3) ou BasicText et BasicTextField, vous bénéficiez d'une compatibilité prête à l'emploi avec les emoji modernes.

Le meilleur moyen de tester les derniers emoji dans votre application consiste à utiliser un appareil réel avec l'API 30 ou une version antérieure.

Si vous utilisez une solution d'emoji personnalisée ou si vous devez désactiver la résolution d'emoji par défaut dans Compose pour une autre raison, vous pouvez utiliser PlatformTextStyle(emojiSupportMatch) :

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

Interopérabilité

Si votre application utilise à la fois des vues et Compose dans la même Activity, assurez-vous d'utiliser les API appropriées pour configurer correctement les emoji. Les sections suivantes décrivent quand utiliser chaque API.

Extension à partir de ComponentActivity

Si votre Activity s'étend à partir de Compose ComponentActivity au lieu de AppCompatActivity, suivez les instructions de la section Compatibilité avec les emoji sans AppCompat.

Étant donné que vous n'étendez pas AppCompatActivity, ajoutez la bibliothèque Emoji2 à vos dépendances et utilisez EmojiTextView dans vos vues au lieu du widget TextView, comme illustré dans l'extrait suivant :

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

Ensuite, dans votre fichier XML :

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

Extension à partir de AppCompatActivity

Si votre Activity s'étend à partir de AppCompatActivity, vous pouvez utiliser ComposeView pour appeler des fonctions composables. Les emoji s'affichent correctement sur toutes les versions d'Android lorsque vous utilisez des composables de texte.

Si vous étendez de AppCompatActivity, gonflez TextView à partir de XML pour que les emoji s'affichent correctement.

Cela s'applique si vous gonflez le XML :

• en dehors de ComposeView, dans Activity. Notez l'utilisation de AppCompatActivity et TextView dans l'extrait suivant :

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

• dans ComposeView, via la liaison de vue à l'aide de AndroidViewBinding, comme dans l'extrait suivant :

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

Pour gonfler un texte avec AndroidView dans ComposeView, utilisez AppCompatTextView pour afficher correctement les emoji :

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

Pour plus d'informations, consultez la documentation des API d'interopérabilité.

Dépannage

Si vous voyez tofu (☐) au lieu de l'emoji, vérifiez d'abord si le problème concerne votre appareil de test spécifique. Voici quelques points principaux à vérifier :

• Vous utilisez peut-être un appareil récemment flashé ou un nouvel émulateur. Si possible, essayez un autre appareil de test réel que vous utilisez souvent et qui est connecté à votre compte Google. N'oubliez pas que l'API doit être 30 ou inférieure pour que les emoji fonctionnent dans les bonnes versions.
• Le téléphone de test n'est pas compatible avec les polices téléchargeables.
• Vérifiez la version correcte des services Google Play.