Afficher les emoji

L'ensemble standard d'emojis est mis à jour chaque année par Unicode, car l'utilisation des emoji augmente rapidement pour tous les types d'applications.

Si votre application affiche du contenu Internet ou permet de saisir du texte, nous vous recommandons vivement de prendre en charge les dernières polices d'emoji. Sinon, les emoji suivants peuvent s'afficher sous la forme d'un petit carré appelé tofu (☐) ou d'autres séquences d'emoji mal affichées.

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

Vous trouverez ci-dessous des exemples d'emoji modernes.

Exemples Version
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (septembre 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (septembre 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (mars 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (octobre 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (février 2019)

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

Cette prise en charge 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 de la prise en charge des emoji modernes dès la sortie de la boîte.

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

Si vous utilisez une solution d'emoji personnalisés 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 Views 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.

Comme 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 indiqué dans l'extrait de code 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 modulables. Les emoji s'affichent correctement sur toutes les versions d'Android lorsque vous utilisez des composables de texte.

Si vous effectuez une extension à partir de AppCompatActivity, gonflez TextView à partir du fichier XML pour que les emoji s'affichent correctement.

Cela s'applique si vous gonflez le fichier XML:

  • en dehors de ComposeView, dans Activity. Notez l'utilisation de AppCompatActivity et TextView dans l'extrait de code 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

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 en savoir plus, consultez la documentation sur les API d'interopérabilité.

Dépannage

Si le tofu (☐) s'affiche à la place de l'emoji, vérifiez d'abord si le problème vient de votre appareil de test spécifique. Voici quelques points principaux à vérifier: