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).
Seperti yang dijelaskan dalam Menyediakan Set Ikon Khusus Kepadatan, Anda harus membuat set ikon terpisah untuk layar berkepadatan rendah, sedang, dan tinggi. Hal ini memastikan ikon Anda akan ditampilkan dengan benar di berbagai perangkat tempat aplikasi Anda dapat diinstal. Lihat Tips untuk Desainer untuk saran tentang cara bekerja dengan beberapa kumpulan ikon.
Final art harus diekspor sebagai file PNG transparan. Jangan sertakan warna latar belakang.
Template untuk membuat ikon di Adobe Photoshop tersedia di Paket Template Ikon.
Peringatan:
Gaya ikon tab berubah drastis di
Android 2.0 dibandingkan dengan versi sebelumnya. Untuk
memberikan dukungan bagi semua versi Android, developer harus:
1. Menempatkan ikon tab untuk Android 2.0 dan versi yang lebih baru dalam
direktori drawable-hdpi-v5, drawable-mdpi-v5, dan drawable-ldpi-v5.
2 Menempatkan ikon tab untuk versi sebelumnya dalam direktori
drawable-hdpi, drawable-mdpi, dan drawable-ldpi.
3 Tetapkan android:targetSdkVersion ke 5 atau lebih tinggi di
<uses-sdk>
di manifes aplikasi.
Tindakan ini akan memberi tahu sistem bahwa tab harus dirender menggunakan gaya tab baru.
Menyediakan Ikon untuk Dua Status Tab
Ikon tab harus memiliki dua status: tidak dipilih dan dipilih. Untuk menyediakan ikon dengan beberapa status, developer harus membuat drawable daftar status untuk setiap ikon, yang merupakan file XML yang mencantumkan gambar yang akan digunakan untuk berbagai status UI.
Misalnya, untuk widget tab dengan tab bernama 'Teman' dan 'Rekan Kerja', Anda dapat menggunakan struktur direktori yang mirip dengan yang di bawah ini:
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...
Konten file XML yang tercantum di atas harus merujuk pada drawable ikon
yang dipilih dan tidak dipilih terkait. Misalnya, di bawah ini adalah kode untuk ic_tab_friends.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>
Android 2.0 hingga Android 2.3
Panduan berikut menjelaskan cara mendesain ikon tab untuk Android 2.0 hingga Android 2.3 (API Level 5 hingga 10).
Ukuran dan posisi
Ikon tab harus menggunakan bentuk dan bentuk sederhana, serta harus diskalakan dan diposisikan di dalam aset akhir.
Gambar 1 mengilustrasikan berbagai cara untuk memosisikan ikon di dalam aset. Anda harus menetapkan ukuran ikon lebih kecil dari batas aset yang sebenarnya.
Untuk menunjukkan ukuran ikon yang direkomendasikan, setiap contoh dalam Gambar 1 menyertakan tiga persegi panjang panduan yang berbeda:
- Kotak merah adalah kotak pembatas untuk aset lengkap.
- Kotak biru adalah kotak pembatas yang disarankan untuk ikon yang sebenarnya. Kotak ikon berukuran lebih kecil dari kotak aset lengkap untuk memungkinkan perlakuan ikon khusus.
- Kotak oranye adalah kotak pembatas yang direkomendasikan untuk ikon yang sebenarnya jika konten berbentuk persegi. Kotak untuk ikon persegi lebih kecil dari ikon lain untuk menetapkan bobot visual yang konsisten di kedua jenis tersebut.
|
|
|
|
|
|
|
Gambar 1. Penentuan ukuran dan posisi ikon tab di dalam batas aset ikon. |
Gaya, warna, dan efek
Ikon tab berbentuk datar, dengan efek matte, dan menghadap ke depan.
Ikon tab harus memiliki dua status: dipilih dan tidak dipilih.
|
Gambar 2. Gaya dan efek untuk ikon tab yang tidak dipilih. Catatan: semua dimensi piksel untuk kepadatan sedang dan harus diskalakan dengan benar untuk kepadatan lainnya.
|
|
Gambar 3. Gaya dan efek untuk ikon tab yang dipilih. Catatan: semua dimensi piksel untuk kepadatan sedang dan harus diskalakan dengan benar untuk kepadatan lainnya.
|
Anjuran dan larangan
Berikut adalah beberapa contoh "anjuran dan larangan" yang perlu dipertimbangkan saat membuat ikon tab untuk aplikasi Anda.
Ikon contoh
Berikut adalah ikon tab kepadatan tinggi standar yang digunakan di platform Android.
Peringatan: Karena resource ini dapat berubah antar-versi platform, Anda tidak boleh mereferensikan salinan resource sistem. Jika ingin menggunakan ikon atau resource drawable internal lainnya, Anda harus menyimpan salinan lokal ikon atau drawable tersebut dalam resource aplikasi, lalu referensikan salinan lokal dari kode aplikasi Anda. Dengan demikian, Anda dapat mempertahankan kontrol atas tampilan ikon, meskipun salinan sistem berubah. Perhatikan bahwa grid di bawah ini tidak dimaksudkan untuk dilengkapi.
Android 1.6 dan versi sebelumnya
Panduan berikut menjelaskan cara mendesain ikon tab untuk Android 1.6 (API Level 4) dan versi sebelumnya.
Struktur
- Ikon tab yang tidak dipilih memiliki efek dan gradien isi yang sama seperti ikon menu, tetapi tanpa glow luar.
- Ikon tab yang dipilih terlihat seperti ikon tab yang tidak dipilih, tetapi dengan bayangan dalam yang lebih redup, dan memiliki gradien bagian depan yang sama dengan ikon dialog.
- Ikon tab memiliki safeframe 1 piksel yang seharusnya hanya tumpang-tindih untuk tepi anti-alias bentuk bulat.
- Semua dimensi yang ditetapkan di halaman ini didasarkan pada ukuran artboard 32x32 piksel. Jangan ubah 1 piksel padding di sekitar kotak pembatas di dalam template Photoshop.
|
Gambar 3. Safeframe dan gradien isi untuk ikon tab yang tidak dipilih. Ukuran ikon sebesar 32x32. |
|
Gambar 4. Safeframe dan gradien isi untuk ikon tab dalam status yang dipilih. Ukuran ikon sebesar 32x32. |
Ikon tab yang tidak dipilih
Cahaya, efek, dan bayangan
Ikon tab yang tidak dipilih akan terlihat seperti ikon tab yang dipilih, tetapi dengan bayangan dalam yang lebih redup, dan gradien bagian depan yang sama dengan ikon dialog.
|
Gambar 5. Cahaya, efek, dan bayangan untuk ikon tab yang tidak dipilih.
|
Langkah demi langkah
|
Ikon tab yang dipilih
Ikon tab yang dipilih memiliki efek dan gradien isi yang sama seperti ikon menu, tetapi tanpa glow luar.
|
Gambar 6. Cahaya, efek, dan bayangan untuk ikon tab yang dipilih.
|
Palet warna
|
Langkah demi langkah
|
