Ikon adaptif

Ikon adaptif, atau AdaptiveIconDrawable, dapat ditampilkan berbeda bergantung pada kapabilitas perangkat masing-masing dan penerapan tema pengguna. Ikon adaptif biasanya digunakan peluncur di layar utama, tetapi juga dapat digunakan di pintasan, aplikasi Setelan, dialog berbagi, dan layar ringkasan.

Ikon adaptif dapat beradaptasi dengan berbagai kasus penggunaan:

  • Bentuk berbeda: ikon adaptif dapat menampilkan berbagai bentuk di berbagai model perangkat. Misalnya, aplikasi dapat menampilkan bentuk lingkaran di satu perangkat OEM, dan menampilkan persegi (bentuk antara persegi dan lingkaran) di perangkat lain. Setiap OEM perangkat harus menyediakan mask, yang digunakan sistem untuk merender semua ikon adaptif dengan bentuk yang sama.

    GIF yang menampilkan animasi berulang dari contoh ikon Android yang sama,
yang menunjukkan bentuk yang berbeda bergantung pada mask yang digunakan—lingkaran lalu
dua jenis persegi panjang yang berbeda
    Gambar 1. Ikon adaptif mendukung berbagai mask, yang bervariasi dari satu perangkat ke perangkat lainnya.
  • Efek visual: ikon adaptif mendukung berbagai efek visual yang menarik, yang ditampilkan saat pengguna menempatkan atau memindahkan ikon di sekitar layar utama.

    GIF yang menampilkan contoh dua ikon contoh Android berbentuk lingkaran,
yang dianimasikan untuk menampilkan respons pengguna. Ikon pertama menunjukkan logo Android
yang bergetar ke kiri lalu ke kanan, lalu ke atas dan ke bawah di dalam lingkaran. Ikon kedua
meluaskan, lalu menciut lagi.
    Gambar 2. Contoh efek visual yang ditampilkan oleh ikon adaptif.
  • Penerapan tema pengguna: mulai Android 13 (API level 33), pengguna dapat menerapkan tema ikon adaptif mereka. Jika pengguna mengaktifkan ikon aplikasi bertema, dengan mengaktifkan tombol Ikon bertema di setelan sistem, dan peluncur mendukung fitur ini, sistem akan menggunakan pewarnaan wallpaper dan tema yang dipilih pengguna untuk menentukan warna tint.

    Gambar yang menunjukkan contoh tiga perangkat Android, masing-masing menampilkan
tema pengguna yang berbeda dengan tint berbeda: yang pertama menampilkan wallpaper dengan
tint gelap; yang kedua menampilkan wallpaper berwarna keemasan; yang ketiga menampilkan
wallpaper dengan wallpaper abu-abu muda dengan tint kebiruan. Pada setiap contoh, ikon mewarisi tint wallpaper dan menyatu sempurna.
    Gambar 3. Ikon adaptif yang mewarisi dari wallpaper dan tema pengguna.

Dalam skenario berikut, layar utama tidak menampilkan ikon aplikasi bertema, dan sebagai gantinya menampilkan ikon aplikasi adaptif atau standar:

  • Jika pengguna tidak mengaktifkan ikon aplikasi bertema.
  • Jika aplikasi Anda tidak menyediakan ikon aplikasi monokrom.
  • Jika peluncur tidak mendukung ikon aplikasi bertema.

Mendesain ikon adaptif

Untuk memastikan ikon adaptif Anda mendukung berbagai bentuk, efek visual, dan tema pengguna, desain harus memenuhi persyaratan berikut:

  • Anda harus menyediakan dua lapisan untuk versi warna ikon: satu untuk latar depan, dan satu untuk latar belakang.

    Gambar yang menunjukkan contoh lapisan latar depan (gambar kiri) dan
lapisan latar belakang (gambar kanan). Latar depan menampilkan ikon 16 sisi dari
contoh logo Android yang berpusat dalam zona aman 66x66. Zona aman
dipusatkan di dalam penampung berukuran 108x108. Latar belakang menunjukkan dimensi
terukur yang sama untuk zona aman dan penampung, tetapi hanya latar belakang
biru dan tanpa logo.
    Gambar 4. Ikon adaptif yang ditentukan menggunakan lapisan latar depan dan latar belakang. Zona aman 66x66 yang digambarkan adalah area yang tidak pernah terpotong oleh mask berbentuk yang ditentukan oleh OEM.
    Gambar yang menampilkan ikon dari gambar sebelumnya yang ditempatkan pada
masker melingkar.
    Gambar 5. Contoh tampilan lapisan latar depan dan latar belakang bersama dengan mask lingkaran yang diterapkan.
  • Jika Anda ingin mendukung penerapan tema pengguna pada ikon aplikasi, berikan satu lapisan ikon versi monokrom.

    Gambar yang menunjukkan contoh lapisan ikon monokrom (gambar kiri)
dan pratinjau warna (gambar kanan). Lapisan monokromatik menampilkan ikon 16 sisi
dari logo Android contoh yang berpusat dalam zona aman 66x66. Zona aman
dipusatkan di dalam penampung berukuran 108x108. Pratinjau warna menampilkan
tampilan lapisan ini saat diterapkan ke tema pengguna yang berwarna berbeda (oranye,
merah muda, kuning, dan hijau).
    Gambar 6. Lapisan ikon monokromatik (kiri) dengan contoh pratinjau warna (kanan).
  • Ukuran semua lapisan menjadi 108x108 dp.

  • Gunakan ikon dengan tepi yang bersih. Lapisan tidak boleh memiliki mask atau bayangan latar belakang di sekitar garis batas ikon.

  • Gunakan logo yang berukuran minimal 48x48 dp. Ukurannya tidak boleh melebihi 66x66 dp, karena bagian dalam ikon berukuran 66x66 dp muncul dalam area pandang yang disamarkan.

Bagian luar 18 dp pada masing-masing dari empat sisi lapisan dicadangkan untuk masking dan membuat efek visual seperti paralaks atau berkedip.

Untuk mempelajari cara membuat ikon adaptif menggunakan Android Studio, lihat template Figma ikon Aplikasi Android atau dokumentasi Android Studio untuk membuat ikon peluncur. Selain itu, lihat postingan blog Mendesain Ikon Adaptif.

Menambahkan ikon adaptif ke aplikasi

Untuk menambahkan ikon adaptif ke aplikasi, update atribut android:icon dalam manifes aplikasi untuk menentukan resource drawable. Anda juga dapat menentukan resource drawable ikon menggunakan atribut android:roundIcon, tetapi hanya jika memerlukan aset ikon yang berbeda untuk mask lingkaran—misalnya, jika branding Anda bergantung pada bentuk lingkaran.

Cuplikan kode berikut mengilustrasikan kedua atribut ini, tetapi sebagian besar aplikasi hanya menentukan android:icon:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Selanjutnya, dalam res/mipmap-anydpi-v26/ic_launcher.xml, buat resource drawable alternatif di aplikasi Anda untuk kompatibilitas mundur dengan Android 8.0 (API level 26). Gunakan elemen <adaptive-icon> untuk menetapkan drawable lapisan latar depan, latar belakang, dan lapisan monokromatik untuk ikon Anda. Elemen dalam <foreground>, <background>, dan <monochrome> mendukung atribut android:drawable.

Contoh berikut menunjukkan cara menentukan elemen <foreground>, <background>, dan <monochrome> di dalam <adaptive-icon>:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Anda juga dapat menentukan drawable sebagai elemen dengan menyertakannya dalam elemen <foreground>, <background>, dan <monochrome>. Cuplikan berikut menunjukkan contoh tindakan ini dengan drawable latar depan.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Jika Anda ingin menerapkan mask dan efek visual yang sama ke pintasan sebagai ikon adaptif reguler, gunakan salah satu teknik berikut:

  • Untuk pintasan statis, gunakan elemen <adaptive-icon>.
  • Untuk pintasan dinamis, panggil metode createWithAdaptiveBitmap() saat Anda membuatnya.

Untuk mengetahui informasi selengkapnya tentang cara menerapkan ikon adaptif, lihat Mengimplementasikan Ikon Adaptif. Untuk informasi selengkapnya tentang pintasan, lihat Ringkasan pintasan aplikasi.

Referensi lainnya

Lihat referensi berikut untuk informasi tambahan tentang mendesain dan mengimplementasikan ikon adaptif.