Ikon adaptif

Android 8.0 (API level 26) memperkenalkan ikon peluncur adaptif, yang dapat menampilkan berbagai bentuk pada model perangkat yang berbeda-beda. Misalnya, ikon peluncur adaptif dapat menampilkan bentuk lingkaran pada satu perangkat OEM, dan menampilkan persegi melingkar di perangkat lain. Tiap perangkat OEM menyediakan mask, yang kemudian digunakan oleh sistem untuk merender semua ikon adaptif dengan bentuk yang sama. Ikon peluncur adaptif juga digunakan di pintasan, aplikasi Setelan, dialog berbagi, dan layar ringkasan.

Beragam mask yang diterapkan ke wireframe ikon adaptif Beragam mask yang diterapkan ke ikon adaptif

Gambar 1. Ikon adaptif mendukung berbagai mask yang bervariasi dari satu perangkat ke perangkat lainnya.

Anda dapat mengontrol tampilan ikon peluncur adaptif dengan menetapkan 2 lapisan, yang terdiri dari latar belakang dan latar depan. Anda harus menyediakan lapisan ikon sebagai resource yang dapat digambar tanpa mask atau bayangan latar belakang di sekitar garis batas ikon.

Ilustrasi isometrik membuat ikon adaptif

Gambar 2. Ikon adaptif ditetapkan menggunakan 2 lapisan dan sebuah mask.

Di Android 7.1 (API level 25) dan lebih lama, ikon peluncur berukuran 48 x 48 dp. Anda sekarang harus menetapkan ukuran lapisan ikon menggunakan pedoman berikut:

  • Kedua lapisan harus berukuran 108 x 108 dp.
  • Bagian dalam ikon berukuran 72 x 72 dp muncul dalam area pandang yang ber-mask.
  • Sistem mencadangkan bagian luar berukuran 18 dp pada masing-masing dari 4 sisi untuk menciptakan efek visual yang menarik, seperti paralaks atau kedipan.

Catatan: Animasi efek visual dibuat oleh peluncur yang didukung. Efek visual dapat bervariasi dari satu peluncur ke peluncur lainnya.

Perhatian: OEM perangkat dapat menentukan mask yang mungkin mencakup radius dengan panjang 33 dp di sepanjang titik tertentu dari bentuk tersebut.

Demo paralaks yang diterapkan ke ikon adaptif Demo animasi pengambilan yang diterapkan ke ikon adaptif

Gambar 3. Ikon adaptif mendukung berbagai efek visual.

Perhatian: Jika Anda tidak mengupdate ikon peluncur dengan lapisan yang diperlukan, ikon terlihat tidak konsisten dengan ikon lain yang ditampilkan oleh UI sistem, dan tidak mendukung efek visual.

Untuk mempelajari cara membuat ikon adaptif menggunakan Android Studio, lihat Membuat Ikon Aplikasi dengan Image Asset Studio.

Membuat ikon adaptif di XML

Untuk menambahkan ikon adaptif ke aplikasi menggunakan XML, mulai dengan mengupdate atribut android:icon dalam manifes aplikasi Anda untuk menentukan resource yang dapat digambar. Anda juga dapat menentukan resource yang dapat digambar untuk ikon menggunakan atribut android:roundIcon. Anda hanya boleh menggunakan atribut android:roundIcon jika membutuhkan aset ikon yang berbeda untuk mask lingkaran, jika misalnya branding logo mengandalkan bentuk lingkaran. Cuplikan kode berikut mengilustrasikan kedua atribut ini:

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

Selanjutnya, Anda harus membuat resource alternatif yang dapat digambar di aplikasi untuk digunakan dengan Android 8.0 (API level 26) dalam res/mipmap-anydpi-v26/ic_launcher.xml. Setelah itu Anda dapat menggunakan elemen <adaptive-icon> untuk menentukan resource yang dapat digambar pada lapisan latar depan dan latar belakang untuk ikon Anda. Elemen bagian dalam <foreground> dan <background> mendukung atribut android:drawable.

    <?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" />
    </adaptive-icon>
    

Anda juga dapat menetapkan resource yang dapat digambar pada latar belakang dan latar depan sebagai elemen dengan menyertakannya dalam elemen <foreground> dan <background>.

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

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

Untuk mengetahui informasi selengkapnya tentang pintasan, lihat Pintasan App.

Referensi lainnya

Untuk informasi tambahan tentang cara mendesain dan mengimplementasikan ikon adaptif, baca seri artikel ini oleh desainer dan developer Google, Nick Butcher: