Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Membuat ikon aplikasi dengan Image Asset Studio

Android Studio menyertakan fitur bernama Image Asset Studio yang membantu Anda membuat ikon aplikasi sendiri dari ikon material, gambar kustom, dan string teks. Fitur tersebut menghasilkan serangkaian ikon pada resolusi yang sesuai untuk setiap kepadatan piksel yang didukung aplikasi Anda. Image Asset Studio menempatkan ikon yang baru dihasilkan dalam folder khusus kepadatan pada direktori res/ project Anda. Pada runtime, Android menggunakan resource yang sesuai berdasarkan kepadatan layar perangkat yang menjalankan aplikasi Anda.

Image Asset Studio membantu Anda menghasilkan jenis ikon berikut:

  • Ikon peluncur
  • Ikon panel tindakan dan tab
  • Ikon notifikasi

Tentang Image Asset Studio

Image Asset Studio membantu Anda membuat beragam jenis ikon pada kepadatan berbeda dan menampilkan secara tepat di mana ikon tersebut ditempatkan dalam project Anda. Bagian berikut menjelaskan jenis ikon yang dapat Anda buat serta input teks dan gambar yang dapat digunakan.

Ikon peluncur adaptif dan lama

Ikon peluncur adalah grafis yang merepresentasikan aplikasi Anda kepada pengguna. Ikon ini dapat:

  • Muncul dalam daftar aplikasi yang terinstal di perangkat dan layar Utama.
  • Merepresentasikan pintasan ke aplikasi Anda (misalnya, ikon pintasan kontak yang membuka informasi detail untuk kontak).
  • Digunakan oleh aplikasi peluncur.
  • Membantu pengguna menemukan aplikasi Anda di Google Play.

Ikon peluncur adaptif dapat ditampilkan sebagai aneka bentuk di berbagai model perangkat dan tersedia di Android 8.0 (API level 26) dan yang lebih baru. Android Studio 3.0 memperkenalkan dukungan untuk membuat ikon adaptif menggunakan Image Asset Studio. Image Asset Studio menghasilkan pratinjau ikon adaptif dalam bentuk lingkaran, persegi bundar, persegi membulat, dan persegi, serta pratinjau ikon penuh. Image Asset Studio juga menghasilkan pratinjau lama, bulat, dan Google Play Store dari ikon tersebut. Ikon peluncur lama adalah grafis yang merepresentasikan aplikasi Anda di layar utama perangkat dan di jendela peluncur. Ikon peluncur lama ditujukan untuk perangkat yang menjalankan Android 7.1 (API level 25) atau yang lebih lama, yang tidak mendukung ikon adaptif, dan tidak ditampilkan sebagai bentuk yang variatif pada berbagai model perangkat.

Image Asset Studio menempatkan ikon ini di lokasi yang tepat dalam direktori res/mipmap-density/, dan membuat gambar berukuran 512 x 512 piksel yang sesuai untuk Google Play Store.

Sebaiknya gunakan gaya desain material untuk ikon peluncur, meskipun Anda mendukung versi Android lama.

Lihat Ikon Peluncur Adaptif dan Ikon Produk - Desain Material untuk informasi selengkapnya.

Ikon panel tindakan dan tab

Ikon panel tindakan adalah elemen grafis yang diletakkan dalam panel tindakan dan merepresentasikan setiap item tindakan. Lihat Menambahkan dan Menangani Tindakan, Panel Aplikasi - Desain Material, dan Desain Panel Tindakan untuk informasi selengkapnya.

Ikon tab adalah elemen grafis yang digunakan untuk merepresentasikan setiap tab pada antarmuka multi-tab. Setiap ikon tab memiliki dua keadaan: unselected dan selected. Lihat Membuat Tampilan Geser dengan Tab dan Tab - Desain Material untuk informasi selengkapnya.

Image Asset Studio menempatkan ikon ini di lokasi yang tepat dalam direktori res/drawable-density/.

Sebaiknya gunakan gaya desain material untuk ikon panel tindakan dan tab, meskipun Anda mendukung versi Android lama. Gunakan appcompat dan library dukungan lainnya untuk mengirimkan UI desain material Anda ke versi platform lama.

Sebagai alternatif Image Asset Studio, Anda dapat menggunakan Vector Asset Studio untuk membuat ikon panel tindakan dan tab. Vector drawable cocok untuk ikon sederhana dan dapat memperkecil ukuran APK Anda.

Ikon notifikasi

Notifikasi adalah pesan yang dapat Anda tampilkan kepada pengguna di luar UI normal aplikasi Anda. Image Asset Studio menempatkan ikon notifikasi di lokasi yang tepat dalam direktori res/drawable-density/:

  • Ikon untuk Android 2.2 (API level 8) dan yang lebih lama ditempatkan dalam direktori res/drawable-density/.
  • Ikon untuk Android 2.3 hingga 2.3.7 (API level 9 hingga 10) ditempatkan dalam direktori res/drawable-density-v9/.
  • Ikon untuk Android 3 (API level 11) dan lebih tinggi ditempatkan dalam direktori res/drawable-density-v11/.

Jika aplikasi Anda mendukung Android 2.3 sampai 2.3.7 (API level 9 sampai 10), Image Asset Studio akan menghasilkan versi ikon abu-abu. Versi Android yang lebih baru menggunakan ikon putih yang dihasilkan Image Asset Studio.

Lihat Notifikasi; Desain Material Notifikasi; Notifikasi, Perubahan Android 5.0; Notifikasi, Android 4.4 dan yang Lebih Lama; dan Ikon Status Bar, Android 3.0 dan yang Lebih Lama untuk informasi selengkapnya.

Clip art

Image Asset Studio memudahkan Anda untuk mengimpor ikon material Google dalam format VectorDrawable dan PNG: cukup dengan memilih ikon dari dialog. Untuk informasi selengkapnya, lihat Ikon Material.

Gambar

Anda dapat mengimpor gambar sendiri dan menyesuaikannya dengan jenis ikon. Image Asset Studio mendukung jenis file berikut: PNG (disarankan), JPG (dapat diterima), dan GIF (tidak disarankan).

String teks

Image Asset Studio memungkinkan Anda mengetik string teks dalam berbagai font, dan menempatkannya pada sebuah ikon. Image Asset Studio mengubah ikon berbasis teks menjadi file PNG untuk kepadatan berbeda. Anda dapat menggunakan font yang terinstal di komputer.

Menjalankan Image Asset Studio

Untuk memulai Image Asset Studio, ikuti langkah-langkah berikut:

  1. Di jendela Project, pilih tampilan Android.
  2. Klik kanan folder res, lalu pilih New > Image Asset.

    Wizard ikon adaptif dan lama di Image Asset Studio.

  3. Lanjutkan dengan mengikuti langkah-langkah berikut:

Membuat ikon peluncur adaptif dan lama

Catatan: Jika aplikasi Anda mendukung Android versi 7.1 ke bawah, ikuti petunjuk untuk membuat ikon peluncur lama saja.

Setelah membuka Image Asset Studio, Anda dapat menambahkan ikon adaptif dan lama dengan mengikuti langkah-langkah berikut:

  1. Di kolom Icon Type, pilih Launcher Icons (Adaptive & Legacy).
  2. Di tab Foreground Layer, pilih Asset Type, lalu tentukan aset pada kolom di bawahnya:
    • Pilih Image untuk menentukan lokasi file gambar.
    • Pilih Clip Art untuk menentukan gambar dari kumpulan ikon desain material.
    • Pilih Text untuk menentukan string teks dan memilih font.
  3. Di tab Background Layer, pilih Asset Type, lalu tentukan aset pada kolom di bawahnya. Anda dapat memilih warna atau menentukan gambar untuk digunakan sebagai lapisan latar belakang.
  4. Di tab Legacy, tinjau setelan default dan pastikan Anda ingin membuat ikon lama, bulat, dan Google Play Store.
  5. Jika ingin, ubah setelan nama dan tampilan untuk masing-masing dari tab Foreground Layer dan Background Layer:
    • Name - Jika tidak ingin menggunakan nama default, ketik nama baru. Jika sudah ada dalam project, seperti yang ditunjukkan oleh error di bagian bawah wizard, nama resource akan ditimpa. Nama hanya boleh berisi karakter huruf kecil, garis bawah, dan angka.
    • Trim - Untuk menyesuaikan margin antara grafis ikon dan batas dalam aset sumber, pilih Yes. Operasi ini menghapus ruang transparan, dengan tetap mempertahankan rasio tinggi lebar. Jika tidak ingin mengubah aset sumber, pilih No.
    • Color - Untuk mengubah warna ikon Clip Art atau Text, klik kolom ini. Dalam dialog Select Color, tentukan warna, lalu klik Choose. Nilai baru akan muncul dalam kolom ini.
    • Resize - Gunakan penggeser untuk menentukan faktor penskalaan dalam persen guna mengubah ukuran ikon Image, Clip Art, atau Text. Kontrol ini dinonaktifkan untuk lapisan latar belakang jika Anda menentukan jenis aset Color.
  6. Klik Next.
  7. Jika ingin, ubah direktori resource: Pilih kumpulan sumber resource tempat Anda ingin menambahkan aset gambar: src/main/res, src/debug/res, src/release/res, atau kumpulan sumber kustom. Kumpulan sumber utama diterapkan ke semua varian build, termasuk debug dan rilis. Kumpulan sumber debug dan rilis akan menggantikan kumpulan sumber utama dan diterapkan ke satu versi build. Kumpulan sumber debug hanya digunakan untuk men-debug. Untuk menentukan kumpulan sumber baru, pilih File > Project Structure > app > Build Types. Misalnya, Anda dapat menentukan kumpulan sumber beta dan membuat versi ikon yang menyertakan teks "BETA" di sudut kanan bawah. Untuk informasi selengkapnya, lihat Mengonfigurasi Varian Build.
  8. Klik Finish. Image Asset Studio menambahkan gambar ke dalam folder mipmap untuk kepadatan berbeda.

Membuat ikon peluncur lama

Catatan: Jika aplikasi Anda mendukung Android 8.0, ikuti petunjuk untuk membuat ikon peluncur adaptif dan lama.

Setelah membuka Image Asset Studio, Anda dapat menambahkan ikon peluncur dengan mengikuti langkah-langkah berikut:

  1. Di kolom Icon Type, pilih Launcher Icon (Legacy Only).
  2. Pilih Asset Type, lalu tetapkan aset pada kolom di bawahnya:
    • Pada kolom Clip Art, klik tombol.
    • Pada dialog Select Icon, pilih sebuah ikon material, lalu klik OK.

    • Pada kolom Path, tentukan jalur dan nama file gambar. Klik ... untuk menggunakan dialog.
    • Pada kolom Text, ketik string teks dan pilih sebuah font.

    Ikon akan ditampilkan di area Source Asset di sebelah kanan, dan di area pratinjau di bagian bawah wizard.

  3. Anda memiliki pilihan untuk mengubah nama dan setelan tampilan:
    • Name - Jika Anda tidak ingin menggunakan nama default, ketik nama baru. Jika sudah ada di dalam project, seperti yang ditunjukkan pada error di bagian bawah wizard, nama resource akan ditimpa. Nama hanya boleh berisi karakter huruf kecil, garis bawah, dan angka.
    • Trim - Untuk menyesuaikan margin antara grafis ikon dan batas dalam aset sumber, pilih Yes. Operasi ini menghapus ruang transparan, dengan tetap mempertahankan rasio tinggi lebar. Jika tidak ingin mengubah aset sumber, pilih No.
    • Padding - Jika Anda ingin menyesuaikan padding aset sumber di keempat sisinya, gerakkan penggeser. Pilih nilai antara -10% sampai 50%. Jika Anda memilih Trim, trimming akan terjadi terlebih dahulu.
    • Foreground - Untuk mengubah warna latar depan ikon Clip Art atau Text, klik kolom ini. Dalam dialog Select Color, tentukan warna, lalu klik Choose. Nilai baru akan muncul dalam kolom ini.
    • Background - Untuk mengubah warna latar belakang, klik kolom ini. Dalam dialog Select Color, tentukan warna, lalu klik Choose. Nilai baru akan muncul dalam kolom ini.
    • Scaling - Untuk menyesuaikan ukuran ikon, pilih Crop atau Shrink to Fit. Dengan crop, tepi gambar dapat dipotong. Dengan shrink, tepi gambar tidak dipotong. Anda dapat menyesuaikan padding, jika diperlukan, jika aset sumber masih tidak pas.
    • Shape - Untuk meletakkan latar di belakang aset sumber, pilih salah satu bentuk; lingkaran, persegi, kotak tegak, atau kotak horizontal. Untuk latar belakang transparan, pilih None.
    • Effect - Jika ingin menambahkan efek dog-ear pada bentuk persegi atau persegi panjang, pilih DogEar. Jika tidak, pilih None.

    Image Asset Studio menempatkan ikon dalam persegi transparan sehingga ada padding di bagian tepinya. Padding menyediakan ruang yang cukup untuk efek ikon drop-shadow standar.

  4. Klik Next.
  5. Anda memiliki pilihan untuk mengubah direktori resource:
    • Res Directory - Pilih kumpulan resource yang ingin Anda tambahi aset gambar: src/main/res, src/debug/res, src/release/res, atau kumpulan sumber yang ditentukan pengguna. Kumpulan sumber utama diterapkan ke semua varian build, termasuk debug dan rilis. Kumpulan sumber debug dan rilis akan menggantikan kumpulan sumber utama dan diterapkan ke satu versi build. Kumpulan sumber debug hanya digunakan untuk men-debug. Untuk menentukan kumpulan sumber baru, pilih File > Project Structure > app > Build Types. Misalnya, Anda dapat menentukan kumpulan sumber beta dan membuat versi ikon yang menyertakan teks "BETA” di sudut kanan bawah. Untuk informasi selengkapnya, lihat Mengonfigurasi Varian Build.

    Area Output Directories menampilkan gambar dan folder tempat direktori akan muncul dalam tampilan Project File jendela Project.

  6. Klik Finish.
  7. Image Asset Studio menambahkan gambar ke dalam folder mipmap untuk kepadatan berbeda.

Membuat ikon panel tindakan atau tab

Setelah membuka Image Asset Studio, Anda dapat menambahkan ikon panel tindakan atau tab dengan mengikuti langkah-langkah berikut:

  1. Pada kolom Icon Type, pilih Action Bar and Tab Icons.
  2. Pilih Asset Type, lalu tetapkan aset pada kolom di bawahnya:
    • Pada kolom Clip Art, klik tombol.
    • Pada dialog Select Icon, pilih sebuah ikon material, lalu klik OK.

    • Pada kolom Path, tentukan jalur dan nama file gambar. Klik ... untuk menggunakan dialog.
    • Pada kolom Text, ketik string teks dan pilih sebuah font.

    Ikon akan ditampilkan di area Source Asset di sebelah kanan, dan di area pratinjau di bagian bawah wizard.

  3. Anda memiliki pilihan untuk mengubah nama dan opsi tampilan:
    • Name - Jika Anda tidak ingin menggunakan nama default, ketik nama baru. Jika sudah ada di dalam project, seperti yang ditunjukkan pada error di bagian bawah wizard, nama resource akan ditimpa. Nama hanya boleh berisi karakter huruf kecil, garis bawah, dan angka.
    • Trim - Untuk menyesuaikan margin antara grafis ikon dan batas dalam aset sumber, pilih Yes. Operasi ini menghapus ruang transparan, dengan tetap mempertahankan rasio tinggi lebar. Jika tidak ingin mengubah aset sumber, pilih No.
    • Padding - Jika Anda ingin menyesuaikan padding aset sumber di keempat sisinya, gerakkan penggeser. Pilih nilai antara -10% sampai 50%. Jika Anda memilih Trim, trimming akan terjadi terlebih dahulu.
    • Theme - Pilih HOLO_LIGHT atau HOLO_DARK. Atau, untuk menentukan warna dalam dialog Select Color, pilih CUSTOM lalu klik kolom Custom color.

    Image Asset Studio membuat ikon dalam persegi transparan sehingga ada padding di bagian tepinya. Padding menyediakan ruang yang cukup untuk efek ikon drop-shadow standar.

  4. Klik Next.
  5. Anda memiliki pilihan untuk mengubah direktori resource:
    • Res Directory - Pilih kumpulan resource yang ingin Anda tambahi aset gambar: src/main/res, src/debug/res, src/release/res, atau kumpulan sumber yang ditentukan pengguna. Kumpulan sumber utama diterapkan ke semua varian build, termasuk debug dan rilis. Kumpulan sumber debug dan rilis akan menggantikan kumpulan sumber utama dan diterapkan ke satu versi build. Kumpulan sumber debug hanya digunakan untuk men-debug. Untuk menentukan kumpulan sumber baru, pilih File > Project Structure > app > Build Types. Misalnya, Anda dapat menentukan kumpulan sumber beta dan membuat versi ikon yang menyertakan teks "BETA” di sudut kanan bawah. Untuk informasi selengkapnya, lihat Mengonfigurasi Varian Build.

    Area Output Directories menampilkan gambar dan folder tempat direktori akan muncul dalam tampilan Project File jendela Project.

  6. Klik Finish.
  7. Image Asset Studio menambahkan gambar dalam folder drawable untuk kepadatan berbeda.

Membuat ikon notifikasi

Setelah membuka Image Asset Studio, Anda dapat menambahkan ikon notifikasi dengan mengikuti langkah-langkah berikut:

  1. Pada kolom Icon Type, pilih Notification Icons.
  2. Pilih Asset Type, lalu tetapkan aset pada kolom di bawahnya:
    • Pada kolom Clip Art, klik tombol.
    • Pada dialog Select Icon, pilih sebuah ikon material, lalu klik OK.

    • Pada kolom Path, tentukan jalur dan nama file gambar. Klik ... untuk menggunakan dialog.
    • Pada kolom Text, ketik string teks dan pilih sebuah font.

    Ikon akan ditampilkan di area Source Asset di sebelah kanan, dan di area pratinjau di bagian bawah wizard.

  3. Anda memiliki pilihan untuk mengubah nama dan opsi tampilan:
    • Name - Jika Anda tidak ingin menggunakan nama default, ketik nama baru. Jika sudah ada di dalam project, seperti yang ditunjukkan pada error di bagian bawah wizard, nama resource akan ditimpa. Nama hanya boleh berisi karakter huruf kecil, garis bawah, dan angka.
    • Trim - Untuk menyesuaikan margin antara grafis ikon dan batas dalam aset sumber, pilih Yes. Operasi ini menghapus ruang transparan, sembari mempertahankan rasio tinggi lebar. Jika tidak ingin mengubah aset sumber, pilih No.
    • Padding - Jika Anda ingin menyesuaikan padding aset sumber di keempat sisinya, gerakkan penggeser. Pilih nilai antara -10% sampai 50%. Jika Anda memilih Trim, trimming akan terjadi terlebih dahulu.

    Image Asset Studio membuat ikon dalam persegi transparan sehingga ada padding di bagian tepinya. Padding menyediakan ruang yang cukup untuk efek ikon drop-shadow standar.

  4. Klik Next.
  5. Anda memiliki pilihan untuk mengubah direktori resource:
    • Res Directory - Pilih kumpulan resource yang ingin Anda tambahi aset gambar: src/main/res, src/debug/res, src/release/res, atau kumpulan sumber yang ditentukan pengguna. Kumpulan sumber utama diterapkan ke semua varian build, termasuk debug dan rilis. Kumpulan sumber debug dan rilis akan menggantikan kumpulan sumber utama dan diterapkan ke satu versi build. Kumpulan sumber debug hanya digunakan untuk men-debug. Untuk menentukan kumpulan sumber baru, pilih File > Project Structure > app > Build Types. Misalnya, Anda dapat menentukan kumpulan sumber beta dan membuat versi ikon yang menyertakan teks "BETA” di sudut kanan bawah. Untuk informasi selengkapnya, lihat Mengonfigurasi Varian Build.

    Area Output Directories menampilkan gambar dan folder tempat direktori akan muncul dalam tampilan Project File jendela Project.

  6. Klik Finish.
  7. Image Asset Studio menambahkan gambar dalam folder drawable untuk versi dan kepadatan berbeda.

Merujuk ke resource gambar dalam kode

Biasanya, Anda dapat merujuk ke resource gambar dengan cara biasa dalam kode Anda, dan ketika aplikasi dijalankan, gambar yang terkait akan otomatis ditampilkan bergantung pada perangkatnya:

  • Umumnya, Anda dapat merujuk ke resource gambar sebagai @drawable dalam kode XML atau Drawable dalam kode Java.
  • Misalnya, kode XML tata letak berikut menampilkan resource drawable dalam ImageView:

        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/myimage" />
        

    Kode Java berikut mengambil gambar sebagai Drawable:

    Kotlin

        val drawable = resources.getDrawable(R.drawable.myimage, theme)
        

    Java

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());
        

    Metode getResources() berada dalam class Context, yang diterapkan pada objek UI, seperti aktivitas, fragmen, tata letak, tampilan, dan seterusnya.

  • Jika aplikasi Anda menggunakan Support Library, Anda dapat merujuk ke resource gambar dalam kode XML dengan pernyataan app:srcCompat. Contoh:
  •     <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat="@drawable/myimage" />
        

Anda hanya dapat mengakses resource gambar dari thread utama.

Setelah memiliki resource gambar di direktori res/ project, Anda dapat mereferensikannya dari kode Java atau tata letak XML Anda menggunakan ID resource-nya. Kode Java berikut menetapkan ImageView untuk menggunakan resource drawable/myimage.png:

Kotlin

    findViewById<ImageView>(R.id.myimageview).apply {
        setImageResource(R.drawable.myimage)
    }
    

Java

    ImageView imageView = (ImageView) findViewById(R.id.myimageview);
    imageView.setImageResource(R.drawable.myimage);
    

Lihat Mengakses Resource untuk informasi selengkapnya.

Untuk ikon peluncur, file AndroidManifest.xml harus mereferensikan lokasi mipmap/. Image Asset Studio otomatis menambahkan kode ini. Kode file manifes berikut mereferensikan ikon ic_launcher dalam direktori mipmap/:

    <application android:name="ApplicationTitle"
             android:label="@string/app_label"
             android:icon="@mipmap/ic_launcher" >
    

Menghapus ikon dari project

Untuk menghapus ikon dari sebuah project:

  1. Di jendela Project, pilih tampilan Android.
  2. Luaskan folder res/mipmap untuk ikon peluncur, atau folder res/drawable untuk jenis ikon lain.
  3. Temukan subfolder dengan nama ikon yang ingin Anda hapus.
  4. Folder ini berisi ikon dengan kepadatan berbeda.

  5. Pilih folder tersebut dan tekan tombol Delete.
  6. Atau, pilih Edit > Delete. Atau klik-kanan file dan pilih Delete.

    Dialog Safe Delete akan muncul.

  7. Jika ingin, pilih opsi untuk menemukan tempat ikon digunakan dalam project, lalu klik OK.
  8. Android Studio menghapus file dari project dan drive. Namun, jika Anda mencari lokasi dalam project tempat file tersebut digunakan dan menemukan beberapa penggunaan, Anda dapat menampilkannya dan memutuskan untuk menghapusnya atau tidak. Anda harus menghapus atau mengganti referensi ini agar dapat mengompilasi project dengan sukses.

  9. Pilih Build > Clean Project.
  10. Android Studio menghapus file gambar apa pun yang dihasilkan yang terkait dengan resource gambar yang dihapus. Android Studio menghapusnya dari project dan drive.

  11. Jika diperlukan, perbaiki semua error yang tersisa akibat beberapa bagian kode yang mereferensikan resource tersebut.
  12. Android Studio menandai error tersebut dalam kode Anda. Setelah menghapus semua referensi dari kode, Anda dapat membuat project Anda lagi.