Visualizza emoji

Il set standard di emoji viene aggiornato annualmente da Unicode, poiché l'utilizzo delle emoji sta aumentando rapidamente per tutti i tipi di app.

Se la tua app mostra contenuti internet o fornisce l'inserimento di testo, ti consigliamo vivamente di supportare i caratteri emoji più recenti. In caso contrario, le emoji successive potrebbero essere visualizzate come un piccolo 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 delle emoji, quindi le app che le visualizzano su queste versioni devono essere aggiornate manualmente.

Di seguito sono riportati alcuni esempi di emoji moderni.

Esempi Versione
🫩 🪉 🇨🇶 16.0 (settembre 2024)
🐦‍🔥 🧑‍🧑‍🧒‍🧒 👩🏽‍🦽‍➡️ 🇲🇶 15.1 (settembre 2023)
🩷 🫸🏼 🐦‍⬛ 15.0 (settembre 2022)
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (settembre 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (settembre 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (marzo 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (ottobre 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (febbraio 2019)

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

Questo supporto non richiede modifiche alla tua app: se utilizzi Text e TextField (Material 2 o Material 3) o BasicText e BasicTextField, ottieni il supporto delle emoji moderne predefinito.

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 delle emoji predefinita 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 Views che Compose 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 il tuo Activity si estende da Compose ComponentActivity anziché da AppCompatActivity, segui le istruzioni per Supportare le emoji 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

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 il tuo Activity si estende da AppCompatActivity, puoi utilizzare ComposeView per chiamare funzioni componibili. Le emoji vengono visualizzate correttamente in tutte le versioni di Android quando utilizzi i composable Text.

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

Ciò si applica se stai aumentando le dimensioni del file XML:

  • fuori da ComposeView, in 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 relativa alle API di interoperabilità.

Risoluzione dei problemi

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