Emojis einblenden

Der Standardsatz an Emojis wird jährlich von Unicode aktualisiert, da die Nutzung von Emojis für alle Arten von Apps rasant zunimmt.

Wenn in deiner App Internetinhalte angezeigt oder Text eingegeben werden kann, empfehlen wir dringend, die neuesten Emoji-Schriftarten zu unterstützen. Andernfalls werden Emojis später möglicherweise als kleines quadratisches Feld namens Tofu (☐) oder andere falsch gerenderte Emoji-Sequenzen angezeigt.

Die Emoji-Schriftart kann unter Android 11 (API-Level 30) und niedriger nicht aktualisiert werden. Apps, in denen diese Emoji-Schriftarten angezeigt werden, müssen daher manuell aktualisiert werden.

Hier einige Beispiele für moderne Emojis.

Beispiele Version
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (September 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (September 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (März 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (Oktober 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (Februar 2019)

BOM März 2023 (Compose UI 1.4) unterstützt die neueste Emoji-Version, einschließlich Abwärtskompatibilität mit älteren Android-Versionen bis API 21.

Für diese Unterstützung sind keine Änderungen an deiner App erforderlich. Wenn du Text und TextField (Material 2 oder Material 3) oder BasicText und BasicTextField verwendest, erhältst du von Anfang an moderne Emoji-Unterstützung.

Am besten testen Sie die neuesten Emojis in Ihrer App, indem Sie ein echtes Gerät mit API 30 oder niedriger verwenden.

Wenn du eine benutzerdefinierte Emoji-Lösung verwendest oder die Standard-Emoji-Auflösung aus einem anderen Grund deaktivieren musst, kannst du PlatformTextStyle(emojiSupportMatch) verwenden:

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

Interoperabilität

Wenn deine App im selben Activity sowohl „View“ als auch „Compose“ verwendet, musst du die entsprechenden APIs verwenden, um Emojis richtig zu konfigurieren. In den folgenden Abschnitten wird beschrieben, wann die einzelnen APIs verwendet werden.

Wird verlängert von ComponentActivity

Wenn Ihre Activity aus „Compose“ ComponentActivity statt AppCompatActivity stammt, folgen Sie der Anleitung Support-Emoji ohne AppCompat.

Da Sie AppCompatActivity nicht erweitern, fügen Sie den Abhängigkeiten die Emoji2-Bibliothek hinzu und verwenden Sie EmojiTextView in Ihren Ansichten anstelle des Widgets TextView, wie im folgenden Snippet gezeigt:

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

Gehen Sie dann in Ihrer XML-Datei so vor:

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

Wird verlängert von AppCompatActivity

Wenn Activity von AppCompatActivity ausgeht, können Sie mit ComposeView zusammensetzbare Funktionen aufrufen. Mit zusammensetzbaren Textfunktionen werden Emojis in allen Android-Versionen korrekt gerendert.

Wenn du eine Erweiterung von AppCompatActivity ausführst, blähe TextView aus XML auf, damit die Emojis korrekt gerendert werden.

Dies gilt, wenn Sie die XML-Datei künstlich in die Höhe treiben:

  • außerhalb von ComposeView, in Activity. Beachten Sie die Verwendung von AppCompatActivity und TextView im folgenden 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

Wenn Sie einen Text mit AndroidView innerhalb von ComposeView aufblähen möchten, verwenden Sie AppCompatTextView, um Emojis korrekt zu rendern:

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

Weitere Informationen finden Sie in der Dokumentation zu Interoperabilitäts-APIs.

Fehlerbehebung

Wenn anstelle des Emojis Tofu (☐) angezeigt wird, prüfen Sie zuerst, ob das Problem bei Ihrem Testgerät vorliegt. Sie können Folgendes überprüfen: