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 internet o fornisce input di testo, consigliamo vivamente di supportare i caratteri delle emoji più recenti. In caso contrario, le emoji successive potrebbero essere visualizzate come una piccola casella quadrata denominata 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 stai usando 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
        )/* ... */
    )
)

Interoperabilità

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

Estensione da ComponentActivity

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

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

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
            }
        }
    }
}

Quindi, nel file XML:

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

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 estendi AppCompatActivity, aumenta TextView da XML per fare in modo che le emoji vengano visualizzate correttamente.

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
            }
        }
    }
}

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
                        }
                    }
                }
            }
        )
    }
}

Per espandere 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 }
                        )
                    }
                }
            }
        )
    }
}

Per maggiori dettagli, consulta la documentazione sulle API 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: