Menampilkan emoji

Set emoji standar diperbarui setiap tahun oleh Unicode, karena penggunaan emoji meningkat pesat untuk semua jenis aplikasi.

Jika aplikasi Anda menampilkan konten internet atau menyediakan input teks, kami sangat menyarankan untuk mendukung font emoji terbaru. Jika tidak, emoji yang lebih baru mungkin akan ditampilkan sebagai kotak persegi kecil yang disebut tofu (☐) atau urutan emoji lain yang dirender dengan tidak benar.

Android versi 11 (level API 30) dan yang lebih rendah tidak dapat mengupdate font emoji, sehingga aplikasi yang menampilkannya di versi tersebut harus diupdate secara manual.

Berikut adalah contoh emoji modern.

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

BOM Maret 2023 (Compose UI 1.4) menghadirkan dukungan untuk versi emoji terbaru, termasuk kompatibilitas mundur dengan versi Android yang lebih lama hingga API 21.

Dukungan ini tidak memerlukan perubahan pada aplikasi Anda— jika Anda menggunakan Text dan TextField (Material 2 atau Material 3) atau BasicText dan BasicTextField, Anda akan mendapatkan dukungan emoji modern secara langsung.

Cara terbaik untuk menguji emoji terbaru di aplikasi Anda adalah dengan menggunakan perangkat sungguhan di API 30 atau yang lebih rendah.

Jika Anda menggunakan solusi emoji kustom, atau perlu menonaktifkan resolusi emoji default di Compose karena alasan lain, Anda dapat menggunakan PlatformTextStyle(emojiSupportMatch):

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

Interoperabilitas

Jika aplikasi Anda menggunakan View dan Compose di Activity yang sama, pastikan Anda menggunakan API yang sesuai untuk mengonfigurasi emoji dengan benar. Bagian berikut menjelaskan kapan harus menggunakan setiap API.

Memperpanjang dari ComponentActivity

Jika Activity Anda diperluas dari Compose ComponentActivity, bukan AppCompatActivity, ikuti petunjuk Mendukung emoji tanpa AppCompat.

Karena Anda tidak memperluas AppCompatActivity, tambahkan library Emoji2 ke dependensi Anda dan gunakan EmojiTextView dalam tampilan, bukan widget TextView, seperti yang ditunjukkan dalam cuplikan berikut:

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

Kemudian, di file XML Anda:

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

Memperpanjang dari AppCompatActivity

Jika Activity Anda diperluas dari AppCompatActivity, Anda dapat menggunakan ComposeView untuk memanggil fungsi composable. Emoji dirender dengan benar di seluruh versi Android saat Anda menggunakan composable Text.

Jika Anda memperluas dari AppCompatActivity, inflate TextView dari XML agar emoji dirender dengan benar.

Hal ini berlaku jika Anda meng-inflate XML:

  • di luar ComposeView, di Activity. Perhatikan penggunaan AppCompatActivity dan TextView dalam cuplikan berikut:

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

Untuk meng-inflate teks dengan AndroidView di dalam ComposeView, gunakan AppCompatTextView untuk merender emoji dengan benar:

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

Lihat dokumentasi Interoperability API untuk mengetahui detailnya.

Pemecahan masalah

Jika Anda melihat tofu (☐) dan bukan emoji, periksa terlebih dahulu apakah masalahnya adalah perangkat pengujian tertentu. Ada beberapa hal utama yang dapat Anda periksa: