Visualizza emoji

L'insieme standard di emoji viene aggiornato annualmente da Unicode, poiché l'utilizzo delle emoji è in aumento rapido per tutti i tipi di app.

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

Le versioni di Android 11 (livello API 30) e precedenti non possono aggiornare il carattere 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)

Il BOM di marzo 2023 (Compose UI 1.4) supporta la versione più recente delle emoji, inclusa la compatibilità con le versioni precedenti di Android fino all'API 21.

Questo supporto non richiede modifiche all'app: se utilizzi Text e TextField (Material 2 o Material 3) o BasicText e BasicTextField, il supporto delle emoji moderne è disponibile immediatamente.

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

Se utilizzi una soluzione di emoji personalizzate o devi disattivare la risoluzione predefinita delle emoji in Scrivi 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 le visualizzazioni sia la composizione nello stesso Activity, assicurati di utilizzare le API appropriate per configurare correttamente le emoji. Le sezioni seguenti descrivono quando utilizzare ciascuna API.

Estensione da ComponentActivity

Se Activity si estende da Scrivi ComponentActivity anziché da AppCompatActivity, segui le istruzioni per supportare le emoji senza AppCompat.

Poiché non espandi AppCompatActivity, aggiungi la libreria Emoji2 alle tue dipendenze e utilizza EmojiTextView nelle tue 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

Poi, 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 da AppCompatActivity

Se Activity si estende da AppCompatActivity, puoi utilizzare ComposeView per chiamare funzioni componibili. Le emoji vengono visualizzate correttamente su tutte le versioni di Android quando utilizzi i componenti composibili di testo.

Se esegui l'estensione da AppCompatActivity, espandi TextView da XML per visualizzare correttamente le emoji.

Questo vale se stai eseguendo l'inflazione del file XML:

  • al di fuori di ComposeView, nella Activity. Nota 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 delle API di interoperabilità.

Risoluzione dei problemi

Se viene visualizzato il tofu (☐) anziché l'emoji, controlla innanzitutto se il problema riguarda il tuo dispositivo di test specifico. Ecco alcuni aspetti principali da controllare: