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 kumpulan ikon terpisah untuk layar berkepadatan sedang, dan tinggi. Hal ini memastikan bahwa 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 dalam Adobe Photoshop tersedia di Ikon Paket Template.
Peringatan:
Gaya ikon tab telah
berubah secara drastis di
Android 2.0 dibandingkan dengan versi sebelumnya. Kepada
memberikan dukungan untuk semua versi Android, developer harus:
Akun Layanan 1. Tempatkan ikon tab untuk Android 2.0 dan yang lebih tinggi di
Direktori drawable-hdpi-v5, drawable-mdpi-v5, dan drawable-ldpi-v5.
2. Tempatkan ikon tab untuk versi sebelumnya di
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 negara bagian, developer harus membuat negara bagian daftar drawable untuk setiap ikon, yaitu file XML yang mencantumkan gambar untuk digunakan di 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
drawable ikon yang dipilih dan tidak dipilih. 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 formulir sederhana dan itu harus diskalakan dan diposisikan di dalam aset akhir.
Gambar 1 menggambarkan berbagai cara untuk memosisikan ikon di dalam aset. Anda harus mengatur ukuran ikon lebih kecil dari batas sesungguhnya aset.
Untuk menunjukkan ukuran ikon yang disarankan, setiap contoh di Gambar 1 berisi 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 disarankan untuk ikon yang sebenarnya ketika kontennya berupa persegi. Kotak untuk ikon persegi lebih kecil dari yang lain ikon untuk menetapkan bobot visual yang konsisten di kedua jenis tersebut.
|
|
|
|
|
|
|
Gambar 1. Pengaturan 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 ini beberapa hal yang "dianjurkan dan tidak boleh" contoh yang perlu dipertimbangkan saat membuat ikon {i>tab<i} untuk aplikasi Anda.
Ikon contoh
Berikut adalah ikon tab kepadatan tinggi standar yang digunakan di platform Android.
Peringatan: Karena sumber daya ini dapat berubah antar versi platform, Anda tidak boleh merujuk pada salinan resource sistem. Jika Anda ingin menggunakan ikon apa pun atau sumber daya drawable internal lainnya, Anda harus menyimpan salinan lokal dari ikon atau drawable tersebut di resource aplikasi Anda, kemudian referensikan salinan lokal dari kode aplikasi Anda. Dengan begitu, Anda bisa mempertahankan kontrol atas tampilan ikon Anda, bahkan jika menyalin perubahan. 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 yang lebih lama.
Struktur
- Ikon tab yang tidak dipilih memiliki gradien isi dan efek yang sama dengan ikon menu, tetapi tanpa cahaya luar.
- Ikon tab yang dipilih akan terlihat seperti ikon tab yang tidak dipilih, tetapi dengan lebih redup bayangan dalam, dan memiliki gradien bagian depan yang sama dengan ikon dialog.
- Ikon tab memiliki safeframe 1 px 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 tab yang tidak dipilih ikon. Ukuran ikon sebesar 32x32. |
|
Gambar 4. Safeframe dan gradien isi untuk ikon tab di status yang dipilih. Ukuran ikon sebesar 32x32. |
Ikon tab yang tidak dipilih
Cahaya, efek, dan bayangan
Ikon tab yang tidak dipilih terlihat seperti ikon tab yang dipilih, tetapi dengan bayangan dalam yang lebih halus, dan gradien bagian depan yang sama seperti ikon dialog.
|
Gambar 5. Cahaya, efek, dan bayangan untuk tidak dipilih ikon tab.
|
Langkah demi langkah
|
Ikon tab yang dipilih
Ikon tab yang dipilih memiliki gradien isi dan efek yang sama dengan menu ikon, tetapi tanpa cahaya luar.
|
Gambar 6. Cahaya, efek, dan bayangan untuk tab yang dipilih ikon.
|
Palet warna
|
Langkah demi langkah
|
