1. Sebelum memulai
Ikon aplikasi merupakan cara penting untuk membedakan aplikasi Anda dengan menambahkan gaya dan tampilan yang berbeda. Ikon aplikasi muncul di sejumlah tempat, termasuk Layar utama, layar Semua Aplikasi, dan aplikasi Setelan.
Anda mungkin juga mendengar ikon aplikasi yang disebut sebagai ikon peluncur. Peluncur merujuk pada pengalaman saat Anda menekan tombol Layar Utama pada perangkat Android untuk melihat dan mengatur aplikasi, menambahkan widget serta pintasan, dan lainnya.
Jika telah menggunakan perangkat Android yang berbeda, Anda mungkin memperhatikan bahwa pengalaman peluncur mungkin terlihat berbeda, tergantung produsen perangkat. Terkadang produsen perangkat membuat pengalaman peluncur kustom yang menjadi ciri khas merek mereka. Misalnya, produsen yang berbeda mungkin menampilkan ikon aplikasi dalam bentuk yang berbeda dengan bentuk ikon lingkaran seperti yang ditampilkan di atas.
Para produsen tersebut dapat menampilkan semua ikon aplikasi, misalnya dalam bentuk persegi, persegi dengan sudut membulat, atau persegi bulat (antara persegi dan lingkaran).
Terlepas dari bentuk yang dipilih produsen perangkat, tujuannya adalah agar semua ikon aplikasi di satu perangkat memiliki bentuk seragam untuk pengalaman pengguna yang konsisten.
Itulah mengapa platform Android memperkenalkan dukungan untuk ikon adaptif (pada API level 26). Dengan menerapkan ikon adaptif, aplikasi Anda dapat mengakomodasi berbagai macam perangkat dengan menyesuaikan ikon peluncur berdasarkan tampilan perangkat.
Codelab ini menyediakan file sumber gambar untuk ikon peluncur aplikasi Affirmations. Anda akan menggunakan alat dari Android Studio bernama Image Asset Studio untuk membuat berbagai versi ikon peluncur. Setelah itu, Anda dapat mengambil apa yang telah Anda pelajari dan menerapkannya ke ikon aplikasi untuk aplikasi lain!
Prasyarat
- Dapat mengakses file dari project Android dasar, termasuk file resource.
- Dapat menginstal aplikasi Android dari Android Studio di emulator atau perangkat fisik.
Yang akan Anda pelajari
- Cara mengubah ikon peluncur aplikasi
- Cara menggunakan Image Asset Studio di Android Studio untuk membuat aset ikon peluncur.
- Pengertian ikon adaptif dan mengapa ikon ini terdiri dari dua lapisan.
Yang akan Anda buat
- Ikon peluncur kustom untuk aplikasi Affirmations.
Yang akan Anda perlukan
- Komputer yang menginstal Android Studio versi stabil terbaru.
- Koneksi internet untuk mendownload file resource gambar.
- Akses ke GitHub
Mendownload kode awal
Di Android Studio, buka folder basic-android-kotlin-compose-training-affirmations
.
- Buka halaman repositori GitHub yang disediakan untuk project.
- Pastikan nama cabang cocok dengan nama cabang yang ditentukan dalam codelab. Misalnya, dalam screenshot berikut, nama cabang adalah main (utama).
- Di halaman GitHub project, klik tombol Code yang akan menampilkan pop-up.
- Pada pop-up, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
- Temukan file di komputer Anda (mungkin di folder Downloads).
- Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.
Membuka project di Android Studio
- Mulai Android Studio.
- Di jendela Welcome to Android Studio, klik Open.
Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > Open.
- Di file browser, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
- Klik dua kali pada folder project tersebut.
- Tunggu Android Studio membuka project.
- Klik tombol Run untuk membangun dan menjalankan aplikasi. Pastikan aplikasi dibangun seperti yang diharapkan.
2. Ikon Peluncur
Tujuannya adalah agar ikon peluncur Anda terlihat jelas dan jernih, terlepas dari model perangkat atau kepadatan layar. Kepadatan layar mengacu pada jumlah piksel per inci atau titik per inci (dpi) pada layar. Perangkat berkepadatan sedang (mdpi) memiliki 160 titik per inci di layar, sedangkan perangkat berkepadatan tripel ekstra tinggi (xxxhdpi) memiliki 640 titik per inci di layar.
Untuk memperhitungkan perangkat di berbagai kepadatan layar, Anda perlu menyediakan versi yang berbeda dari ikon aplikasi.
Menjelajahi file ikon peluncur
- Untuk melihat tampilan ikon peluncur dalam project, buka project di Android Studio.
- Pada jendela Project, alihkan ke tampilan Project. Tindakan ini akan menampilkan struktur file project Anda.
- Buka direktori resource (app > src > main > res) dan perluas beberapa folder
mipmap
. Foldermipmap
ini adalah tempat Anda perlu meletakkan aset ikon peluncur untuk aplikasi Android.
Folder drawable berisi vektor untuk ikon peluncur di file XML. Vektor, dalam kasus ikon drawable, merupakan serangkaian petunjuk yang membuat gambar saat dikompilasi. mdpi
, hdpi
, xhdpi
, dll. adalah penentu kepadatan yang dapat ditambahkan ke nama direktori resource, seperti mipmap,
, yang menunjukkan bahwa ukuran tersebut merupakan resource untuk perangkat dengan kepadatan layar tertentu. Di bawah ini adalah daftar penentu kepadatan di Android:
mdpi
- resource untuk layar berkepadatan sedang (~160 dpi)hdpi
- resource untuk layar berkepadatan tinggi (~240 dpi)xhdpi
- resource untuk layar berkepadatan ekstra tinggi (~ 320 dpi)xxhdpi
- resource untuk layar berkepadatan dobel ekstra tinggi (~480 dpi)xxxhdpi
- resource untuk layar berkepadatan tripel ekstra tinggi (~640 dpi)nodpi
- resource yang tidak dimaksudkan untuk diskalakan, terlepas dari kepadatan piksel layaranydpi
- resource yang diskalakan hingga kepadatan apa pun
- Jika mengklik file gambar, Anda akan melihat pratinjau. File
ic_launcher.webp
berisi versi persegi dari ikon, sedangkan fileic_launcher_round.webp
berisi versi lingkaran dari ikon. Keduanya disediakan di setiap direktori mipmap.
Misalnya, seperti inilah tampilan dari res > mipmap-xxxhdpi > ic_launcher_round.webp. Perhatikan ukuran aset di kanan atas. Gambar ini berukuran 192px x 192px.
Seperti inilah tampilan res > mipmap-mdpi > ic_launcher_round.webp. Gambar ini hanya berukuran 48px x 48px.
Seperti yang dapat dilihat, file gambar bitmap ini terdiri dari petak piksel tetap. Petak tersebut dibuat untuk resolusi layar tertentu. Karenanya, kualitas dapat menurun saat Anda mengubah ukuran.
Setelah memiliki pengetahuan tentang ikon peluncur, Anda sekarang akan mempelajari ikon adaptif.
3. Ikon Adaptif
Lapisan Latar Depan dan Latar Belakang
Mulai rilis Android 8.0 (API level 26), ada dukungan untuk ikon adaptif, yang memungkinkan lebih banyak fleksibilitas dan efek visual yang menarik. Untuk developer, hal ini berarti ikon aplikasi Anda terdiri dari dua lapisan: lapisan latar depan dan lapisan latar belakang.
Pada contoh di atas, ikon Android putih berada di lapisan latar depan, sedangkan petak biru dan putih berada di lapisan latar belakang. Lapisan latar depan ditumpuk di atas lapisan latar belakang. Mask, dalam hal ini mask lingkaran, akan diterapkan di bagian atas untuk menghasilkan ikon aplikasi berbentuk lingkaran.
Menjelajahi file ikon adaptif
Lihat file ikon adaptif default yang sudah disediakan di kode aplikasi Affirmations Anda.
- Di jendela Project Android Studio, cari dan luaskan direktori resource res > mipmap-anydpi-v26.
- Buka file
ic_launcher.xml
. Anda akan melihat:
<?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"/>
<monochrome android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>
- Perhatikan bagaimana elemen
<adaptive-icon>
digunakan untuk menyatakan lapisan<background>
dan<foreground>
ikon aplikasi dengan menyediakan drawable resource untuk masing-masing. - Kembali ke tampilan Project, lalu temukan drawable latar belakang dan latar depan: res > drawable > ic_launcher_background.xml dan res > drawable > ic_launcher_foreground.xml.
- Alihkan ke tampilan Design untuk melihat pratinjau masing-masing:
Latar belakang:
Latar depan:
- Keduanya merupakan file vektor drawable. Gambar ini tidak memiliki ukuran tetap dalam piksel. Jika beralih ke tampilan Code, Anda dapat melihat pernyataan XML untuk vektor drawable yang menggunakan elemen
<vector>
.
ic_launcher_foreground.xml
<!--
Copyright (C) 2023 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
<aapt:attr name="android:fillColor">
<gradient
android:endX="85.84757"
android:endY="92.4963"
android:startX="42.9492"
android:startY="49.59793"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0" />
<item
android:color="#00000000"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
android:strokeWidth="1"
android:strokeColor="#00000000" />
</vector>
Meskipun vektor drawable dan gambar bitmap menggambarkan grafis, keduanya memiliki perbedaan yang penting.
Gambar bitmap tidak terlalu memahami gambar yang disimpannya, kecuali untuk informasi warna pada setiap piksel. Di sisi lain, grafik vektor tahu cara menggambar bentuk untuk menentukan gambar. Petunjuk ini terdiri dari kumpulan titik, garis, dan kurva bersamaan dengan informasi warna. Keuntungannya adalah grafik vektor bisa diskalakan untuk setiap ukuran kanvas, untuk segala kepadatan layar, dan tanpa kehilangan kualitas.
Vektor drawable adalah penerapan grafis vektor Android dengan tujuan agar grafis menjadi fleksibel di perangkat seluler. Anda dapat menentukan grafis tersebut dalam XML dengan elemen yang memungkinkan. Anda hanya perlu menentukan gambar sekali, bukan memberikan versi dari aset bitmap untuk semua bucket kepadatan. Dengan begitu, hal tersebut dapat mengurangi ukuran aplikasi dan membuatnya lebih mudah untuk dipelihara.
Sekarang saatnya untuk mengubah ikon aplikasi!
4. Mendownload aset baru
Download dua aset baru berikut yang memungkinkan Anda membuat ikon adaptif untuk aplikasi Affirmations. Anda tidak perlu memahami terlebih dahulu setiap detail file vektor drawable. Kontennya dibuat secara otomatis dari alat desain.
- Download
ic_launcher_background.xml
yang merupakan vektor drawable untuk lapisan latar belakang. Jika browser menampilkan file, pilih File > Simpan Halaman Sebagai... untuk menyimpannya ke komputer, bukan mendownloadnya. - Download
ic_launcher_foreground.xml
yang merupakan vektor drawable untuk lapisan latar depan.
Perlu diperhatikan bahwa ada persyaratan tertentu untuk aset lapisan latar depan dan latar belakang, misalnya keduanya harus berukuran 108 dpi x 108 dpi. Anda dapat melihat detail selengkapnya di dokumen AdaptiveIconDrawable dan melihat panduan desain di ikon Android di situs Desain Material.
Karena bagian tepi ikon Anda bisa terpotong, tergantung pada bentuk mask dari produsen perangkat, penting untuk menempatkan informasi penting tentang ikon Anda di "zona aman". Zona aman adalah lingkaran dengan diameter 66 dpi di tengah lapisan latar depan. Konten di luar zona aman sebaiknya bukan hal yang penting, misalnya warna latar belakang, dan tidak masalah jika terpotong.
5. Mengubah ikon aplikasi
Kembali ke Android Studio untuk menggunakan aset baru yang baru saja Anda download.
- Pertama, hapus resource drawable lama yang berisi ikon Android dan latar belakang petak berwarna hijau. Di Project view, klik kanan pada file dan pilih Delete.
Hapus:
drawable/ic_launcher_background.xml
drawable/ic_launcher_foreground.xml
Hapus:
mipmap-anydpi-v26/
mipmap-hdpi/
mipmap-mdpi/
mipmap-xhdpi/
mipmap-xxhdpi/
mipmap-xxxhdpi/
Anda dapat menghapus centang kotak Safe delete (with usage search), lalu mengklik OK. Fitur Safe delete (with usage search) menelusuri kode untuk penggunaan resource yang akan Anda hapus. Dalam hal ini, Anda akan mengganti folder ini dengan folder baru bernama sama, sehingga Anda tidak perlu khawatir tentang Safe delete.
- Buat Image Asset baru. Anda dapat mengklik kanan direktori res dan memilih New > Image Asset, atau mengklik tab Resource Manager, mengklik ikon +, lalu memilih Image Asset dari menu dropdown.
- Alat Image Asset Studio Android Studio akan terbuka.
- Biarkan setelan default:
- Icon Type: Launcher Icons (Adaptive and Legacy)
- Name: ic_launcher
- Setelah tab Foreground Layer dipilih, buka ke subbagian Source Asset. Pada kolom Path, klik ikon folder.
- Perintah akan muncul untuk menjelajahi komputer dan memilih file. Temukan lokasi file
ic_launcher_foreground.xml
baru yang baru saja Anda download. Mungkin file berada di folder Download di komputer Anda. Setelah Anda menemukannya, klik Open. - Path sekarang menampilkan lokasi vektor drawable latar depan yang baru. Biarkan Layer Name sebagai ic_launcher_foreground dan Asset Type sebagai Image.
- Selanjutnya, alihkan ke tab Background Layer antarmuka. Biarkan nilai default tersebut.
- Klik ikon folder di kolom Path.
- Temukan lokasi file
ic_launcher_background.xml
yang baru Anda download. Klik Open.
- Pratinjau akan diperbarui saat Anda memilih file resource baru. Hasilnya akan terlihat seperti ini dengan lapisan latar depan dan latar belakang yang baru.
Dengan menampilkan ikon aplikasi pada dua lapisan, produsen perangkat—disebut produsen peralatan asli atau disingkat OEM—dapat membuat bentuk yang berbeda, tergantung perangkat Android, seperti yang ditampilkan pada pratinjau di atas. OEM menyediakan mask yang berlaku untuk semua ikon aplikasi pada perangkat.
Saat mask lingkaran diterapkan ke kedua lapisan ikon aplikasi, hasilnya adalah ikon lingkaran dengan gambar Android dan latar belakang petak biru (gambar kiri di atas). Atau, mask persegi dengan sudut membulat dapat diterapkan untuk menghasilkan ikon aplikasi di kanan atas.
Memiliki lapisan latar depan dan latar belakang memungkinkan efek visual yang menarik karena kedua lapisan tersebut dapat bergerak sendiri tanpa saling bergantung, dan akan diskalakan. Untuk beberapa contoh menarik tentang tampilan efek visual, lihat postingan blog Mendesain Ikon Adaptif di bagian Pertimbangan Desain. Karena Anda tidak tahu perangkat apa yang dimiliki pengguna atau mask mana yang akan diterapkan oleh OEM ke ikon, Anda perlu menyiapkan ikon adaptif agar informasi penting tidak terpotong.
- Jika konten penting terpotong atau muncul terlalu kecil, Anda dapat menggunakan panel penggeser Resize di bagian Scaling pada setiap lapisan untuk memastikan semuanya muncul di zona aman. Untuk memastikan tidak ada yang terpotong, ubah ukuran gambar latar depan dan latar belakang menjadi 99% dengan menarik penggeser Resize di tab Foreground Layer dan Background Layer.
- Klik Next.
- Langkah ini adalah untuk Confirm Icon Path. Anda dapat mengklik setiap file untuk melihat pratinjaunya.
- Klik Finish.
- Verifikasi semua aset yang dibuat apakah sudah benar di folder
mipmap
. Contoh:
Bagus sekali! Sekarang Anda akan membuat satu perubahan lagi.
Menguji aplikasi
- Uji apakah ikon aplikasi baru Anda muncul. Jalankan aplikasi di perangkat Anda (emulator atau perangkat fisik).
- Tekan tombol Layar Utama di perangkat Anda.
- Geser ke atas untuk menampilkan daftar Semua Aplikasi.
- Cari aplikasi yang baru saja diupdate. Anda akan melihat ikon aplikasi baru ditampilkan.
Bagus! Ikon aplikasi baru terlihat keren.
Ikon peluncur adaptif dan versi lama
Karena ikon adaptif bekerja dengan baik, Anda mungkin bertanya-tanya mengapa Anda tidak bisa menghapus semua gambar bitmap ikon aplikasi. Anda masih memerlukan file tersebut agar ikon aplikasi yang muncul berkualitas tinggi di versi Android yang lebih lama, yang disebut sebagai kompatibilitas mundur.
Untuk perangkat yang menjalankan Android 8.0 atau yang lebih tinggi (API versi 26 dan yang lebih baru), Ikon adaptif dapat digunakan (kombinasi antara vektor drawable latar depan, vektor drawable latar belakang, dengan mask OEM yang diterapkan di atasnya). Berikut adalah file yang relevan dalam project Anda:
res/drawable/ic_launcher_background.xml
res/drawable/ic_launcher_foreground.xml
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml
Pada perangkat yang menjalankan versi di bawah Android 8.0 (tetapi di atas API level minimum yang diperlukan aplikasi Anda), Ikon peluncur lama digunakan (gambar bitmap di folder mipmap
dari bucket kepadatan yang berbeda). Berikut adalah file yang relevan dalam project Anda:
res/mipmap-mdpi/ic_launcher.webp
res/mipmap-mdpi/ic_launcher_round.webp
res/mipmap-hdpi/ic_launcher.webp
res/mipmap-hdpi/ic_launcher_round.webp
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.webp
res/mipmap-xxhdpi/ic_launcher.webp
res/mipmap-xxhdpi/ic_launcher_round.webp
res/mipmap-xxxhdpi/ic_launcher.webp
res/mipmap-xxxhdpi/ic_launcher_round.webp
Pada dasarnya, Android akan kembali ke gambar bitmap pada perangkat lama tanpa dukungan ikon adaptif.
Selamat, Anda telah menyelesaikan semua langkah untuk mengubah ikon aplikasi!
6. Mendapatkan kode solusi
Untuk mendownload kode codelab yang sudah selesai, Anda dapat menggunakan perintah git berikut:
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git $ cd basic-android-kotlin-compose-training-affirmations $ git checkout main
Atau, Anda dapat mendownload repositori sebagai file ZIP, lalu mengekstraknya, dan membukanya di Android Studio.
Jika Anda ingin melihat kode solusi, lihat di GitHub.
- Buka halaman repositori GitHub yang disediakan untuk project.
- Pastikan nama cabang cocok dengan nama cabang yang ditentukan dalam codelab. Misalnya, dalam screenshot berikut, nama cabang adalah main (utama).
- Di halaman GitHub project, klik tombol Code yang akan menampilkan pop-up.
- Pada pop-up, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
- Temukan file di komputer Anda (mungkin di folder Downloads).
- Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.
Membuka project di Android Studio
- Mulai Android Studio.
- Di jendela Welcome to Android Studio, klik Open.
Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > Open.
- Di file browser, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
- Klik dua kali pada folder project tersebut.
- Tunggu Android Studio membuka project.
- Klik tombol Run untuk membangun dan menjalankan aplikasi. Pastikan aplikasi dibangun seperti yang diharapkan.
7. Ringkasan
- Tempatkan file ikon aplikasi di direktori resource
mipmap
. - Berikan versi berbeda dari gambar bitmap ikon aplikasi di setiap bucket kepadatan (
mdpi
,hdpi
,xhdpi
,xxhdpi
,xxxhdpi
) untuk kompatibilitas mundur dengan versi Android lama. - Tambahkan penentu resource ke direktori resource untuk menentukan resource yang harus digunakan di perangkat dengan konfigurasi tertentu (
v24
atauv26
). - Vektor drawable adalah implementasi grafik vektor dari Android. Semuanya ditetapkan dalam XML sebagai sekumpulan titik, garis, dan kurva, beserta informasi warna terkait. Vektor drawable dapat diskalakan untuk kepadatan apa pun tanpa kehilangan kualitas.
- Ikon adaptif diperkenalkan ke platform Android di API 26. Perangkat tersebut terdiri dari lapisan latar depan dan latar belakang dengan memenuhi persyaratan tertentu, sehingga ikon aplikasi Anda terlihat berkualitas tinggi di berbagai perangkat dengan mask OEM yang berbeda.
- Gunakan Image Asset Studio di Android Studio untuk membuat ikon lama dan adaptif untuk aplikasi Anda.
8. Pelajari lebih lanjut
- Pedoman desain terkait ikon Android
- Ikon Adaptif
- Memahami Ikon Adaptif Android
- Mendesain Ikon Adaptif
- Mengimplementasikan Ikon Adaptif
- Aplikasi Playground Ikon Adaptif
- Membuat Ikon Peluncur Adaptif dan Versi Lama
- Mendukung kepadatan piksel yang berbeda
- Meletakkan ikon aplikasi di direktori mipmap
- Ringkasan Vektor Drawable
- Class
VectorDrawable