Ikon adaptif

Ikon adaptif, atau AdaptiveIconDrawable, dapat ditampilkan secara berbeda tergantung pada kemampuan perangkat individual dan pengguna penerapan tema. Ikon adaptif utamanya digunakan oleh peluncur di layar utama, tetapi juga dapat digunakan dalam pintasan, aplikasi Setelan, dialog berbagi, dan layar ringkasan. Ikon adaptif digunakan di semua faktor bentuk Android.

Berbeda dengan bitmap gambar, ikon adaptif dapat beradaptasi dengan berbagai kasus penggunaan:

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

    GIF yang menampilkan animasi berulang dari contoh ikon Android yang sama, menunjukkan bentuk yang berbeda tergantung pada {i> mask<i} yang digunakan—lingkaran dan kemudian dua jenis kerucut yang berbeda
    Gambar 1. Ikon adaptif mendukung berbagai masker, yang bervariasi dari satu perangkat ke perangkat lainnya.

  • Efek visual: ikon adaptif mendukung berbagai elemen visual yang menarik efek, yang ditampilkan saat pengguna menempatkan atau memindahkan ikon di sekitar rumah layar.

    GIF yang menunjukkan contoh dua ikon contoh Android berbentuk lingkaran, animasi untuk menunjukkan respons pengguna. Ikon pertama menunjukkan logo Android bergoyang ke kiri lalu ke kanan, lalu ke atas dan ke bawah di dalam lingkaran. Yang kedua mengembang dan kemudian berkontraksi lagi.
    Gambar 2. Contoh efek visual yang ditampilkan oleh ikon adaptif.

  • Tema pengguna: mulai dari Android 13 (level API 33), pengguna dapat menerapkan tema ikon adaptifnya. Jika pengguna mengaktifkan ikon aplikasi bertema, dengan mengaktifkan Tombol Ikon bertema di setelan sistem, dan peluncur mendukung fitur ini sistem menggunakan pewarnaan wallpaper yang dipilih pengguna dan tema untuk menentukan warna tint.

    Gambar yang menampilkan contoh tiga perangkat Android, masing-masing menampilkan tema pengguna yang berbeda dengan tint yang berbeda: yang pertama menampilkan wallpaper dengan menggunakan warna gelap; yang kedua menampilkan wallpaper berwarna emas; yang ketiga menunjukkan wallpaper dengan wallpaper abu-abu terang dan wallpaper kebiruan. Dalam setiap contoh, ikon telah mewarisi warna wallpaper dan menyatu dengan sempurna.
    Gambar 3. Ikon adaptif yang mewarisi wallpaper dan tema pengguna.

    Dalam skenario berikut, layar utama tidak menampilkan tema ikon aplikasi, 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 lagi untuk latar belakang. Lapisan dapat berupa vektor atau bitmap, meskipun vektor lebih disukai.

    Gambar yang menunjukkan contoh lapisan latar depan (gambar kiri) dan lapisan latar belakang (gambar kanan). Latar depan menampilkan ikon 16 sisi contoh logo Android yang berada di tengah area aman 66x66. Zona aman adalah berpusat di dalam wadah 108x108. Latar belakang menampilkan dimensi terukur untuk zona aman dan container, tetapi hanya dimensi biru latar belakang dan tanpa logo.
    Gambar 4. Ikon adaptif yang ditentukan menggunakan latar depan dan latar belakang. Zona aman 66x66 yang digambarkan adalah area yang tidak pernah terpotong oleh {i> mask<i} berbentuk yang ditentukan oleh OEM.
    Gambar yang menampilkan ikon dari gambar sebelumnya yang ditempatkan pada mask lingkaran.
    Gambar 5. Contoh bagaimana latar depan dan lapisan latar belakang terlihat bersama dengan mask lingkaran yang diterapkan.

  • Jika Anda ingin mendukung tema pengguna ikon aplikasi, sediakan satu lapisan untuk ikon versi monokrom.

    Gambar yang menunjukkan contoh lapisan ikon monokrom (gambar kiri) dan pratinjau warna (gambar kanan). Lapisan monokromatik menunjukkan lapisan 16 sisi ikon contoh logo Android yang berada di tengah zona aman 66x66. Brankas zona berada di tengah dalam kontainer 108x108. Pratinjau warna menampilkan {i>layer<i} ini ditampilkan ketika diterapkan pada tema pengguna dengan warna berbeda (oranye, merah muda, kuning, dan hijau).
    Gambar 6. Lapisan ikon monokrom (kiri) dengan contoh pratinjau warna (kanan).

  • Mengubah ukuran semua lapisan menjadi 108x108 dp.

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

  • Gunakan logo yang berukuran minimal 48x48 dp. Ukuran tidak boleh lebih dari 66x66 dp, karena ukuran 66x66 dp bagian dalam ikon muncul dalam bagian dalam area pandang.

Bagian luar 18 dp pada masing-masing dari keempat sisi lapisan disediakan untuk penyamaran dan untuk menciptakan efek visual seperti paralaks atau kedipan.

Untuk mempelajari cara membuat ikon adaptif menggunakan Android Studio, lihat Aplikasi Android kami ikon Figma template atau Dokumentasi Android Studio untuk membuat peluncur ikon. Selain itu, lihat postingan blog Designing Adaptive Ikon kami.

Menambahkan ikon adaptif ke aplikasi

Ikon adaptif, sama seperti ikon non-adaptif, ditentukan menggunakan Atribut android:icon di aplikasi manifes.

Atribut opsional, android:roundIcon, digunakan oleh peluncur yang mewakili dengan ikon lingkaran, dan mungkin berguna jika ikon aplikasi menyertakan latar belakang lingkaran sebagai bagian inti dari desainnya. Peluncur tersebut diperlukan untuk membuat ikon aplikasi dengan menerapkan mask lingkaran ke android:roundIcon, dan memungkinkan Anda mengoptimalkan tampilan ikon aplikasi dengan, untuk memperbesar sedikit logo dan memastikan bahwa ketika dipangkas, latar belakang lingkaran adalah {i>full bleed<i}.

Cuplikan kode berikut menggambarkan kedua atribut ini, tetapi sebagian besar aplikasi hanya tentukan android:icon:

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

Selanjutnya, simpan ikon adaptif Anda ke res/mipmap-anydpi-v26/ic_launcher.xml. Gunakan elemen <adaptive-icon> untuk menentukan latar depan, latar belakang, dan resource lapisan monokromatik untuk ikon Anda. <foreground>, Elemen dalam <background>, dan <monochrome> mendukung keduanya gambar vektor dan bitmap.

Contoh berikut menunjukkan cara menentukan <foreground>, <background>, dan <monochrome> elemen 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 menyisipkannya ke dalam elemen Elemen <foreground>, <background>, dan <monochrome>. Hal berikut cuplikan menunjukkan contoh melakukannya 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 {i>mask<i} dan efek visual yang sama pada pintasan Anda 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 informasi selengkapnya tentang cara menerapkan ikon adaptif, lihat Menerapkan Adaptif Ikon. Untuk informasi selengkapnya tentang pintasan, lihat Pintasan aplikasi ringkasan.

Referensi lainnya

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