Mendukung emoji modern

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara mendukung emoji di Compose.
Dukung emoji →

Kumpulan emoji standar ini diperbarui setiap tahun oleh Unicode, karena penggunaan emoji meningkat dengan cepat untuk semua jenis aplikasi.

Jika aplikasi Anda menampilkan konten internet atau menyediakan input teks, sebaiknya Anda mendukung font emoji terbaru. Jika tidak, emoji berikutnya mungkin ditampilkan sebagai kotak persegi kecil yang disebut tofu (☐) atau urutan emoji yang dirender secara tidak benar.

Android versi 11 (API level 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
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (September 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (September 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (Maret 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (Oktober 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (Februari 2019)

Library androidx.emoji2:emoji2 memberikan kompatibilitas mundur yang lebih sederhana dengan versi Android yang lebih rendah. Library emoji2 merupakan dependensi library AppCompat dan tidak memerlukan konfigurasi lebih lanjut agar dapat berfungsi.

Dukungan emoji di Compose

BOM Maret 2023 (Compose UI 1.4) menghadirkan dukungan untuk versi emoji terbaru, termasuk kompatibilitas mundur dengan versi Android lama hingga API 21. Halaman ini membahas cara mengonfigurasi emoji modern di sistem View. Lihat halaman Emoji di Compose untuk mengetahui informasi selengkapnya.

Prasyarat

Untuk mengonfirmasi bahwa aplikasi Anda menampilkan emoji yang lebih baru dengan benar, luncurkan emoji di perangkat yang menjalankan Android 10 (API level 29) atau yang lebih rendah. Halaman ini berisi emoji modern yang dapat Anda tampilkan untuk pengujian.

Menggunakan AppCompat untuk mendukung emoji terbaru

AppCompat 1.4 menyertakan dukungan untuk emoji.

Untuk menggunakan AppCompat guna mendukung emoji, lakukan hal berikut:

  1. Pastikan modul Anda bergantung pada library AppCompat versi 1.4.0-alpha01 atau yang lebih tinggi.

    build.gradle

// Ensure version is 1.4.0-alpha01 or higher.
implementation "androidx.appcompat:appcompat.$appcompatVersion"

  2. Pastikan semua aktivitas yang menampilkan teks memperluas class AppCompatActivity.

    Kotlin

    MyActivity.kt

class MyActivity: AppCompatActivity {
...
}

    Java

    MyActivity.java

class MyActivity extends AppCompatActivity {
...
}

  3. Uji integrasi Anda dengan meluncurkan aplikasi di perangkat yang menjalankan Android 10 atau yang lebih rendah dan menampilkan string pengujian berikut. Pastikan semua karakter dirender dengan benar.

    • 14.0: 🫠, 🫱🏼‍🫲🏿, 🫰🏽
    • 13.1: 😶‍🌫️, 🧔🏻‍♀️, 🧑🏿‍❤️‍🧑🏾
    • 13.0: 🥲, 🥷🏿, 🐻‍❄️
    • 12.1: 🧑🏻‍🦰, 🧑🏿‍🦯, 👩🏻‍🤝‍👩🏼
    • 12.0: 🦩, 🦻🏿, 👩🏼‍🤝‍👩🏻

Aplikasi Anda akan otomatis menampilkan emoji kompatibilitas mundur di semua perangkat yang menyediakan penyedia font yang dapat didownload dan kompatibel dengan emoji2, seperti perangkat yang didukung oleh layanan Google Play.

Jika aplikasi Anda menggunakan AppCompat, tetapi menampilkan tofu (☐)

Terkadang aplikasi Anda mungkin menampilkan tofu, bukan emoji yang tepat, meskipun Anda menambahkan library AppCompat. Berikut adalah kemungkinan penjelasan dan solusi.

Anda menjalankan aplikasi di perangkat yang baru-baru ini di-flash atau emulator baru

Hapus data layanan Google Play aplikasi untuk menghapus cache font yang mungkin terjadi selama memulai. Tindakan ini biasanya akan menyelesaikan masalah setelah beberapa jam.

Untuk menghapus data aplikasi, lakukan hal berikut:

  1. Buka Setelan di perangkat yang menjalankan Android.

  2. Ketuk Aplikasi & notifikasi.

  3. Ketuk Lihat semua aplikasi atau Info aplikasi.

  4. Scroll aplikasi, lalu ketuk Layanan Google Play.

  5. Ketuk Penyimpanan & cache.

  6. Ketuk Hapus cache.

Aplikasi Anda tidak menggunakan class terkait teks AppCompat

Hal ini dapat terjadi jika Anda tidak memperluas AppCompatActivity atau jika Anda membuat instance tampilan dalam kode, seperti TextView. Periksa hal-hal berikut ini:

  • Aktivitas akan memperluas AppCompatActivity.
  • Jika membuat tampilan dalam kode, gunakan subclass AppCompat yang benar.

AppCompatActivity akan otomatis meng-inflate AppCompatTextView sebagai pengganti TextView saat meng-inflate XML, sehingga Anda tidak perlu mengupdate XML.

Ponsel uji coba tidak mendukung font yang dapat didownload

Pastikan DefaultEmojiCompatConfig.create menampilkan konfigurasi non-null.

Emulator pada API level sebelumnya belum mengupgrade layanan Google Play

Saat menggunakan emulator pada API level yang lebih lama, Anda mungkin perlu mengupdate layanan Google Play yang dipaketkan agar emoji2 dapat menemukan penyedia font. Untuk melakukannya, login ke Google Play Store di emulator.

Untuk memverifikasi bahwa versi yang kompatibel telah diinstal, lakukan hal berikut:

  1. Jalankan perintah berikut:

    adb shell dumpsys package com.google.android.gms | grep version

  2. Pastikan versionCode lebih tinggi dari 211200000.

Mendukung emoji tanpa AppCompat

Jika aplikasi Anda tidak dapat menyertakan AppCompat, aplikasi dapat langsung menggunakan emoji2. Hal ini memerlukan lebih banyak pekerjaan, jadi hanya gunakan metode ini jika aplikasi Anda tidak dapat menggunakan AppCompat.

Untuk mendukung emoji tanpa library AppCompat, lakukan hal berikut:

  1. Di file build.gradle aplikasi Anda, sertakan emoji2 dan emoji2-views.

    build.gradle

def emojiVersion = "1.0.0-alpha03"
implementation "androidx.emoji2:emoji2:$emojiVersion"
implementation "androidx.emoji2:emoji2-views:$emojiVersion"

    Modul emoji2-views menyediakan subclass TextView, Button, dan EditText yang mengimplementasikan EmojiCompat. Jangan menggunakannya dalam aplikasi yang menyertakan AppCompat, karena sudah mengimplementasikan EmojiCompat.

  2. Dalam XML dan kode—di mana pun Anda menggunakan TextView, EditText, atau Button—gunakan EmojiTextView, EmojiEditText, atau EmojiButton.

    activity_main.xml

<androidx.emoji2.widget.EmojiTextView ... />
<androidx.emoji2.widget.EmojiEditText ... />
<androidx.emoji2.widget.EmojiButton ... />

    Dengan menyertakan modul emoji2, sistem akan menggunakan penyedia font default yang dapat didownload untuk memuat font emoji secara otomatis segera setelah aplikasi dimulai. Tidak perlu konfigurasi lebih lanjut.

  3. Untuk menguji integrasi Anda, luncurkan aplikasi Anda di perangkat yang menjalankan Android 11 atau yang lebih rendah dan menampilkan string pengujian berikut. Pastikan semua karakter dirender dengan benar.

    • 14.0: 🫠, 🫱🏼‍🫲🏿, 🫰🏽
    • 13.1: 😶‍🌫️, 🧔🏻‍♀️, 🧑🏿‍❤️‍🧑🏾
    • 13.0: 🥲, 🥷🏿, 🐻‍❄️
    • 12.1: 🧑🏻‍🦰, 🧑🏿‍🦯, 👩🏻‍🤝‍👩🏼
    • 12.0: 🦩, 🦻🏿, 👩🏼‍🤝‍👩🏻

Menggunakan EmojiCompat tanpa widget

EmojiCompat menggunakan EmojiSpan untuk merender gambar yang benar. Oleh karena itu, metode tersebut harus mengubah objek CharSequence tertentu menjadi objek Spanned dengan objek EmojiSpan. Class EmojiCompat menyediakan metode process() untuk mengubah CharSequences menjadi instance Spanned. Dengan menggunakan metode ini, Anda dapat memanggil process() di latar belakang dan meng-cache hasilnya, yang akan meningkatkan performa aplikasi Anda.

Kotlin

val processed = EmojiCompat.get().process("neutral face \uD83D\uDE10")

Java

CharSequence processed = EmojiCompat.get().process("neutral face \uD83D\uDE10");

Menggunakan EmojiCompat untuk editor metode input

Class EmojiCompat memungkinkan keyboard merender emoji yang didukung oleh aplikasi yang berinteraksi dengannya. Editor metode input (IME) dapat menggunakan metode getEmojiMatch() untuk memeriksa apakah instance EmojiCompat dapat merender emoji. Metode ini membutuhkan CharSequence emoji dan menampilkan true jika EmojiCompat dapat mendeteksi dan merender emoji.

Keyboard juga dapat memeriksa versi EmojiCompat yang didukung aplikasi untuk menentukan emoji yang akan dirender dalam palet. Untuk memeriksa versinya, jika tersedia, keyboard dapat mencari kunci berikut di paket EditorInfo.extras:

  • EDITOR_INFO_METAVERSION_KEY: mewakili versi metadata emoji yang digunakan aplikasi. Jika kunci ini tidak ada, berarti aplikasi tidak menggunakan EmojiCompat.
  • EDITOR_INFO_REPLACE_ALL_KEY: jika kunci tersebut ada dan disetel ke true, aplikasi akan mengonfigurasi EmojiCompat untuk mengganti semua emoji, meskipun emoji tersebut ada di dalam sistem.

Pelajari lebih lanjut cara mengonfigurasi instance EmojiCompat.

Menggunakan emoji dalam tampilan kustom

Jika aplikasi Anda memiliki tampilan kustom yang merupakan subclass langsung atau tidak langsung dari TextView—misalnya, Button, Switch, atau EditText—dan tampilan tersebut dapat menampilkan konten buatan pengguna, masing-masing harus mengimplementasikan EmojiCompat.

Prosesnya bervariasi bergantung pada apakah aplikasi Anda menggunakan library AppCompat.

Menambahkan tampilan kustom untuk aplikasi dengan AppCompat

Jika aplikasi Anda menggunakan AppCompat, perluas implementasi AppCompat, bukan implementasi platform. Gunakan tabel berikut sebagai panduan untuk cara memperluas tampilan di AppCompat:

Sebagai ganti memperluas ... Perluas
TextView AppCompatTextView
EditText AppCompatEditText
ToggleButton AppCompatToggleButton
Switch SwitchCompat
Button AppCompatButton
CheckedTextView AppCompatCheckedTextView
RadioButton AppCompatRadioButton
CheckBox AppCompatCheckBox
AutoCompleteTextView AppCompatAutoCompleteTextView
MultiAutoCompleteTextView AppCompatMultiAutoCompleteTextView

Menambahkan tampilan kustom untuk aplikasi tanpa AppCompat

Jika aplikasi Anda tidak menggunakan AppCompat, gunakan helper integrasi tampilan di modul emoji2-views-helper yang dirancang untuk digunakan dalam tampilan kustom. Helper ini merupakan helper yang digunakan library AppCompat untuk mengimplementasikan dukungan emoji.

Selesaikan langkah-langkah berikut untuk mendukung tampilan kustom bagi aplikasi yang tidak menggunakan AppCompat.

  1. Tambahkan library emoji2-views-helper:

    implementation "androidx.emoji2:emoji2-views-helper:$emojiVersion"

  2. Ikuti petunjuk untuk menyertakan EmojiTextViewHelper atau EmojiEditTextHelper dalam tampilan kustom aplikasi Anda.

  3. Uji integrasi Anda dengan meluncurkan aplikasi di perangkat yang menjalankan Android 10 atau yang lebih rendah dan menampilkan string pengujian berikut. Pastikan semua karakter dirender dengan benar.

    • 14.0: 🫠, 🫱🏼‍🫲🏿, 🫰🏽
    • 13.1: 😶‍🌫️, 🧔🏻‍♀️, 🧑🏿‍❤️‍🧑🏾
    • 13.0: 🥲, 🥷🏿, 🐻‍❄️
    • 12.1: 🧑🏻‍🦰, 🧑🏿‍🦯, 👩🏻‍🤝‍👩🏼
    • 12.0: 🦩, 🦻🏿, 👩🏼‍🤝‍👩🏻

Fitur opsional untuk menangani emoji2

Setelah menyertakan library emoji2 di aplikasi, Anda dapat menambahkan fitur opsional yang dijelaskan di bagian ini.

Mengonfigurasi emoji2 untuk menggunakan font lain atau penyedia font yang dapat didownload

Untuk mengonfigurasi emoji2 agar menggunakan font atau penyedia font yang dapat didownload, lakukan hal berikut:

  1. Nonaktifkan EmojiCompatInitializer dengan menambahkan hal berikut ke manifes:

    <provider
android:name="androidx.startup.InitializationProvider"
android:authorities="${applicationId}.androidx-startup"
android:exported="false"
tools:node="merge">
<meta-data android:name="androidx.emoji2.text.EmojiCompatInitializer"
           tools:node="remove" />
</provider>

  2. Lakukan salah satu hal berikut:

Mengubah perilaku EmojiCompat

Anda dapat menggunakan instance EmojiCompat.Config untuk mengubah perilaku EmojiCompat.

Opsi konfigurasi yang paling penting adalah setMetadataLoadStrategy(), yang akan mengontrol kapan EmojiCompat memuat font. Pemuatan font dimulai segera setelah EmojiCompat.load() dipanggil, dan hal ini akan memicu download yang diperlukan. Sistem akan membuat thread untuk mendownload font kecuali jika aplikasi Anda menyediakannya.

LOAD_STRATEGY_MANUAL memungkinkan Anda mengontrol kapan EmojiCompat.load() dipanggil, dan LOAD_STRATEGY_DEFAULT akan menyebabkan pemuatan dimulai secara sinkron dalam panggilan ke EmojiCompat.init().

Sebagian besar aplikasi menggunakan LOAD_STRATEGY_MANUAL agar dapat mengontrol thread dan waktu pemuatan font. Aplikasi Anda harus ditunda hingga setelah layar pertama ditampilkan untuk menghindari munculnya latensi memulai. EmojiCompatInitializer akan mengikuti praktik ini dan menunda pemuatan font emoji hingga setelah layar pertama dilanjutkan.

Gunakan metode berikut dari class dasar untuk menetapkan aspek konfigurasi lainnya:

  • setReplaceAll(): menentukan apakah EmojiCompat mengganti semua emoji yang ditemukannya dengan instance EmojiSpan. Secara default, saat EmojiCompat menyimpulkan bahwa sistem dapat merender emoji, sistem tidak akan mengganti emoji tersebut. Jika ditetapkan ke true, EmojiCompat akan mengganti semua emoji dengan objek EmojiSpan.
  • setEmojiSpanIndicatorEnabled(): menunjukkan apakah EmojiCompat mengganti emoji dengan objek EmojiSpan. Jika disetel ke true, EmojiCompat akan menggambar latar belakang untuk EmojiSpan. Metode ini hanya digunakan untuk tujuan proses debug.
  • setEmojiSpanIndicatorColor: menetapkan warna untuk menunjukkan EmojiSpan. Nilai defaultnya adalah GREEN.
  • registerInitCallback(): memberi tahu aplikasi tentang status inisialisasi EmojiCompat.

Menambahkan pemroses inisialisasi

Class EmojiCompat dan EmojiCompat.Config menyediakan metode registerInitCallback() dan unregisterInitCallback() untuk mendaftarkan dan membatalkan pendaftaran callback inisialisasi. Aplikasi Anda menggunakan callback ini untuk menunggu hingga EmojiCompat diinisialisasi sebelum Anda memproses emoji di thread latar belakang atau dalam tampilan kustom.

Untuk menggunakan metode ini, buat instance dari class EmojiCompat.InitCallback. Panggil metode ini dan teruskan instance class EmojiCompat.InitCallback. Setelah inisialisasi berhasil, class EmojiCompat akan memanggil metode onInitialized(). Jika library gagal melakukan inisialisasi, class EmojiCompat akan memanggil metode onFailed().

Untuk memeriksa status inisialisasi kapan saja, panggil metode getLoadState(). Metode ini menampilkan salah satu nilai berikut: LOAD_STATE_LOADING, LOAD_STATE_SUCCEEDED, atau LOAD_STATE_FAILED.

Mendukung font yang dipaketkan dengan emoji2

Anda dapat menggunakan artefak emoji2-bundled untuk memaketkan font emoji ke dalam aplikasi. Namun, karena font NotoColorEmoji lebih dari 10 MB, sebaiknya aplikasi Anda menggunakan font yang dapat didownload jika memungkinkan. Artefak emoji2-bundled ditujukan untuk aplikasi di perangkat yang tidak mendukung font yang dapat didownload.

Untuk menggunakan artefak emoji2-bundled, lakukan langkah berikut:

  1. Sertakan artefak emoji2-bundled dan emoji2:

    implementation "androidx.emoji2:emoji2:$emojiVersion"
implementation "androidx.emoji2:emoji2-bundled:$emojiVersion"

  2. Konfigurasikan emoji2 untuk menggunakan konfigurasi yang dipaketkan:

    Kotlin

    EmojiCompat.init(BundledEmojiCompatConfig(context))

    Java

    EmojiCompat.init(new BundledEmojiCompatConfig(context));

  3. Uji integrasi dengan mengikuti langkah-langkah sebelumnya untuk menyertakan emojicompat dengan atau tanpa AppCompat. Pastikan string pengujian ditampilkan dengan benar.

    • 14.0: 🫠, 🫱🏼‍🫲🏿, 🫰🏽
    • 13.1: 😶‍🌫️, 🧔🏻‍♀️, 🧑🏿‍❤️‍🧑🏾
    • 13.0: 🥲, 🥷🏿, 🐻‍❄️
    • 12.1: 🧑🏻‍🦰, 🧑🏿‍🦯, 👩🏻‍🤝‍👩🏼
    • 12.0: 🦩, 🦻🏿, 👩🏼‍🤝‍👩🏻

Dampak konfigurasi EmojiCompat otomatis

Sistem akan menerapkan konfigurasi default dengan menggunakan library startup, EmojiCompatInitializer, dan DefaultEmojiCompatConfig.

Setelah aktivitas pertama dilanjutkan di aplikasi Anda, penginisialisasi akan menjadwalkan pemuatan font emoji. Penundaan singkat ini memungkinkan aplikasi Anda menampilkan konten awal tanpa potensi latensi karena pemuatan font di thread latar belakang.

DefaultEmojiCompatConfig akan mencari penyedia font yang dapat didownload dan diinstal oleh sistem, yang mengimplementasikan antarmuka EmojiCompat, seperti layanan Google Play. Pada perangkat yang didukung oleh layanan Google Play, tindakan ini akan memuat font menggunakan layanan Google Play.

Penginisialisasi akan membuat thread latar belakang untuk memuat font emoji, dan proses download font memerlukan waktu hingga 10 detik sebelum waktu habis. Setelah font didownload, diperlukan waktu sekitar 150 milidetik pada thread latar belakang untuk melakukan inisialisasi EmojiCompat.

Tunda inisialisasi EmojiCompat, meskipun Anda menonaktifkan EmojiCompatInitializer. Jika Anda mengonfigurasi EmojiCompat secara manual, panggil EmojiCompat.load() setelah menampilkan layar pertama aplikasi Anda untuk menghindari pertentangan latar belakang dengan pemuatan layar pertama.

Setelah dimuat, EmojiCompat akan menggunakan sekitar 300 KB RAM untuk menyimpan metadata emoji.