Visualizza emoji

Il set standard di emoji viene aggiornato annualmente da Unicode, in quanto l'utilizzo delle emoji aumenta rapidamente per tutti i tipi di app.

Se la tua app mostra contenuti di internet o offre la possibilità di inserire testo, ti consigliamo vivamente di supportare i caratteri delle emoji più recenti. In caso contrario, le emoji successive potrebbero essere visualizzate come un piccolo riquadro quadrato chiamato tofu (unico) o altre sequenze di emoji visualizzate in modo errato.

Android 11 (livello API 30) e versioni precedenti non possono aggiornare il carattere delle emoji, pertanto le app che le mostrano su queste versioni devono essere aggiornate manualmente.

Di seguito sono riportati alcuni esempi di emoji moderne.

Esempi Versione
🫠 🫱🏼‍🫲🏿 🫰🏽 14:0 (settembre 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13,1 (settembre 2020)
🥲 🥷🏿 🐻‍❄️ 13:0 (marzo 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (ottobre 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (febbraio 2019)

BOM - Marzo 2023 (Compose UI 1.4) offre il supporto per la versione di emoji più recente, inclusa la compatibilità con le versioni precedenti di Android fino all'API 21.

Questa assistenza non richiede modifiche alla tua app. Se usi Text e TextField (Material 2 o Material 3) oppure BasicText e BasicTextField, puoi usufruire immediatamente del supporto di emoji moderne.

Il modo migliore per testare le emoji più recenti nella tua app è utilizzare un dispositivo reale con l'API 30 o versioni precedenti.

Se utilizzi una soluzione di emoji personalizzata o devi disattivare la risoluzione predefinita delle emoji in Compose per qualsiasi altro motivo, puoi utilizzare PlatformTextStyle(emojiSupportMatch):

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

Interoperabilità

Se la tua app utilizza sia Visualizzazioni che Scrivi nello stesso Activity, assicurati di utilizzare le API appropriate per configurare correttamente le emoji. Le seguenti sezioni descrivono quando utilizzare ciascuna API.

Estensione in corso da ComponentActivity

Se Activity si estende da Scrivi ComponentActivity anziché AppCompatActivity, segui le istruzioni relative all'emoji Assistenza senza AppCompat.

Poiché non stai estendendo AppCompatActivity, aggiungi la libreria Emoji2 alle dipendenze e utilizza EmojiTextView nelle visualizzazioni anziché il widget TextView, come mostrato nel seguente snippet:

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

Quindi, nel file XML:

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

Estensione in corso da AppCompatActivity

Se Activity si estende da AppCompatActivity, puoi utilizzare ComposeView per chiamare le funzioni componibili. Quando utilizzi componibili di testo, le emoji vengono visualizzate correttamente nelle versioni Android.

Se stai estendendo l'attività da AppCompatActivity, aumenta TextView da XML per visualizzare correttamente le emoji.

Questo vale se stai gonfiando il file XML:

  • al di fuori di ComposeView, in Activity. Osserva l'utilizzo di AppCompatActivity e TextView nel seguente snippet:

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

Per gonfiare un testo con AndroidView all'interno di ComposeView, utilizza AppCompatTextView per visualizzare correttamente le 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

Per maggiori dettagli, consulta la documentazione sulle API interoperabilità.

Risoluzione dei problemi

Se vedi tofu (interpunzione ) anziché l'emoji, verifica innanzitutto se il problema riguarda il dispositivo di test specifico. Ecco alcuni aspetti principali che puoi controllare: