Membuat ikon aplikasi (View)

Implementasi Jetpack Composearrow_forward

Halaman ini berisi informasi tentang cara membuat dan menggunakan ikon aplikasi yang khusus untuk tata letak berbasis View. Untuk informasi yang lebih komprehensif tentang cara membuat ikon aplikasi, lihat Membuat ikon aplikasi, yang membahas framework UI yang direkomendasikan.

Membuat ikon panel tindakan atau tab

Gunakan Image Asset Studio untuk membuat ikon panel tindakan dan tab untuk tata letak berbasis View.

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 {:.external}, 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 status: unselected (tidak dipilih) dan selected (dipilih). 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 platform versi lama.

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

Setelah Anda 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 tentukan aset di kolom di bawahnya:

   • Pada kolom Clip Art, klik tombol.

     Di dialog Select Icon , pilih sebuah ikon material, lalu klik OK.

   • Pada kolom Path, tentukan jalur dan nama file gambar. Klik ... untuk menggunakan salah satu dialog.

   • Pada kolom Text , ketik string teks, lalu pilih 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:

   • Nama - Jika Anda tidak ingin menggunakan nama default, ketik nama baru. Jika nama resource sudah ada dalam project, seperti ditunjukkan oleh error di bagian bawah wizard, nama tersebut 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, sambil tetap mempertahankan rasio aspek. 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 juga memilih Trim, trimming akan terjadi terlebih dahulu.

   • Tema - Pilih HOLO_LIGHT atau HOLO_DARK. Atau, untuk menetapkan satu warna dalam dialog Select Color , pilih CUSTOM , lalu klik kolom Custom color.

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

4. Klik Berikutnya.

5. Jika mau, Anda dapat mengubah direktori resource:

   • Res Directory - Pilih set sumber resource tempat Anda ingin menambahkan aset gambar: src/main/res, src/debug/res, src/release/res, atau set sumber yang ditentukan pengguna. Set sumber utama diterapkan ke semua varian build, termasuk debug dan rilis. Set sumber debug dan rilis akan menggantikan set sumber utama dan diterapkan ke satu versi build. Set sumber debug hanya untuk proses debug. Untuk menentukan set sumber baru, pilih File > Project Structure > app > Build Types. Misalnya, Anda dapat menentukan set 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 keduanya akan muncul dalam Project Files view jendela Project.

6. Klik Finish.

   Image Asset Studio menambahkan gambar ke dalam folder drawable untuk kepadatan yang 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:

• Dalam sebagian besar kasus, Anda dapat merujuk ke resource gambar sebagai @drawable dalam kode XML atau Drawable dalam kode Java.

  Misalnya, kode XML tata letak berikut menampilkan 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 di class Context, yang berlaku untuk objek UI, seperti activity, fragment, layout, view, 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 merujuknya dari kode Java atau tata letak XML menggunakan ID resource-nya. Kode Java berikut menetapkan ImageView untuk menggunakan resource drawable/myimage.png:

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

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

Lihat Mengakses resource aplikasi untuk mengetahui informasi selengkapnya.