Widget aplikasi (terkadang hanya disebut “widget”) adalah fitur yang diperkenalkan di Android 1.5 dan semakin ditingkatkan di Android 3.0 dan 3.1. Widget dapat menampilkan informasi aplikasi yang paling relevan atau tepat waktu dalam sekejap, di layar Utama pengguna. Image sistem Android standar mencakup beberapa widget, termasuk widget untuk Jam Analog, Musik, dan aplikasi lainnya.
Gambar 1. Contoh widget aplikasi di Android 4.0.
Dokumen ini menjelaskan cara mendesain widget agar sesuai dengan widget lainnya dan dengan elemen lain pada Layar utama Android seperti ikon peluncur dan pintasan. Artikel ini juga menjelaskan beberapa standar untuk aset visual widget dan beberapa tips dan trik grafis widget.
Untuk mengetahui informasi tentang cara mengembangkan widget, lihat bagian Widget Aplikasi di Panduan Developer.
Anatomi Widget Standar
Widget aplikasi Android yang umum memiliki tiga komponen utama: Kotak pembatas, bingkai, dan kontrol grafis widget serta elemen lainnya. Widget aplikasi dapat berisi subset widget Tampilan di Android; kontrol yang didukung mencakup label teks, tombol, dan gambar. Untuk daftar lengkap Tampilan yang tersedia, lihat bagian Membuat Tata Letak Widget Aplikasi di Panduan Developer. Widget yang didesain dengan baik menyisakan sedikit margin di antara tepi kotak pembatas dan bingkai, dan padding di antara tepi bagian dalam bingkai dan kontrol widget.
Gambar 2. Widget biasanya memiliki margin di antara kotak pembatas dan bingkai, serta padding di antara kontrol bingkai dan widget.
Catatan: Pada Android 4.0, widget aplikasi secara otomatis diberi margin di antara bingkai widget dan kotak pembatas widget aplikasi untuk memberikan perataan yang lebih baik dengan widget dan ikon lainnya di layar utama pengguna. Untuk memanfaatkan perilaku yang sangat direkomendasikan ini, setel targetSdkVersion aplikasi ke 14 atau lebih besar.
Widget yang didesain agar pas secara visual dengan widget lain di Layar utama menerima tanda dari elemen lain di Layar utama untuk perataan; widget juga menggunakan efek bayangan standar. Semua detail tersebut dijelaskan dalam dokumen ini.
Menentukan ukuran untuk widget Anda
Setiap widget harus menetapkan minWidth dan minHeight, yang menunjukkan jumlah minimum ruang yang harus digunakannya secara default. Jika pengguna menambahkan widget ke Layar utama, biasanya widget akan mengisi lebar dan tinggi yang lebih besar dari ukuran minimum yang ditentukan. Layar utama Android menawarkan kepada pengguna petak ruang yang tersedia yang dapat digunakan untuk menempatkan widget dan ikon. Petak ini dapat bervariasi menurut perangkat; misalnya, banyak ponsel menawarkan petak 4x4, dan tablet dapat menawarkan petak 8x7 yang lebih besar. Saat ditambahkan, widget akan direntangkan agar memenuhi jumlah sel minimum, secara horizontal dan vertikal, yang diperlukan agar memenuhi batasan minWidth dan minHeight. Seperti yang didiskusikan dalam Mendesain Grafis Latar Belakang dan Tata Letak Widget di bawah, penggunaan latar belakang nine-patch dan tata letak yang fleksibel untuk widget aplikasi akan memungkinkan widget Anda menyesuaikan dengan baik ke petak Layar utama perangkat dan tetap dapat digunakan serta menyajikan tampilan estetis yang mengagumkan.
Meskipun lebar dan tinggi sel — serta jumlah margin otomatis yang diterapkan ke widget — dapat bervariasi di berbagai perangkat, Anda dapat menggunakan tabel di bawah untuk memperkirakan dimensi minimum widget dengan, dengan menetapkan jumlah yang diinginkan dari sel petak yang ditempati:
| # dari Sel (Kolom atau Baris) |
Ukuran yang Tersedia (dp) ( minWidth atau minHeight) |
|---|---|
| 1 | 40dp |
| 2 | 110dp |
| 3 | 180dp |
| 4 | 250dp |
| … | … |
| n | 70 × n − 30 |
Praktik yang baik adalah bersikap konservatif terhadap minWidth dan minHeight, dengan menentukan ukuran minimum yang akan merender widget dalam status default yang baik. Untuk contoh cara menyediakan minWidth dan minHeight, misalkan Anda memiliki widget pemutar musik yang menampilkan artis dan judul lagu yang sedang diputar (ditumpuk secara vertikal), tombol Putar, dan tombol Selanjutnya:
Gambar 3. Contoh widget pemutar musik.
Tinggi minimum Anda harus tinggi dari kedua TextViews untuk artis dan judul, ditambah beberapa margin teks. Lebar minimum Anda harus lebar minimum yang dapat digunakan dari tombol Putar dan Selanjutnya, ditambah lebar teks minimum (misalnya, lebar 10 karakter), ditambah margin teks horizontal.
Gambar 4. Contoh ukuran dan margin untuk penghitungan minWidth/minHeight. Kami memilih 144dp sebagai contoh lebar minimum yang baik untuk label teks.
Contoh penghitungannya adalah sebagai berikut:
minWidth= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight= 48dp + (2 × 4dp) = 56dp
Jika ada padding konten di background nine-patch latar belakang widget, Anda harus menambahkan ke minWidth dan minHeight sebagaimana mestinya.
Widget yang dapat diubah ukurannya
Widget dapat diubah ukurannya secara horizontal dan/atau vertikal pada Android 3.1. Artinya, minWidth dan minHeight secara efektif menjadi ukuran default untuk widget tersebut. Anda dapat menentukan ukuran widget minimum menggunakan minResizeWidth dan minResizeHeight; nilai ini harus menentukan ukuran yang mana widget akan menjadi tidak terbaca atau tidak dapat digunakan, seperti di bawah ini.
Ini umumnya adalah fitur pilihan untuk widget koleksi seperti yang didasarkan pada ListView atau GridView.
Menambahkan margin ke widget aplikasi Anda
Seperti yang telah disebutkan sebelumnya, Android 4.0 akan secara otomatis menambahkan margin kecil dan standar untuk setiap tepi widget di Layar utama, untuk aplikasi yang menentukan targetSdkVersion versi 14 atau lebih besar. Hal ini membantu menyeimbangkan Layar utama secara visual, sehingga sebaiknya Anda tidak menambahkan margin tambahan di luar bentuk latar belakang widget aplikasi Anda pada Android 4.0.
Sangat mudah untuk menuliskan tata letak tunggal yang memiliki margin khusus yang diterapkan untuk versi platform sebelumnya, dan tanpa margin tambahan untuk Android 4.0 dan versi lebih baru. Lihat Menambahkan Margin pada Widget Aplikasi di Panduan Developer untuk mengetahui informasi tentang cara mencapai hal ini dengan XML tata letak.
Mendesain Tata Letak Widget dan Grafis Latar Belakang
Sebagian besar widget akan memiliki kotak latar belakang yang solid atau bentuk kotak membulat. Ini adalah praktik terbaik untuk mendefinisikan bentuk ini menggunakan nine-patch; satu untuk setiap kepadatan layar (lihat Mendukung Beberapa Layar untuk detailnya). Nine-patch dapat dibuat dengan alat draw9patch, atau hanya dengan program pengeditan grafis seperti Adobe® Photoshop. Ini memungkinkan bentuk latar belakang widget menggunakan seluruh ruang yang tersedia. Nine-patch harus tepi-ke-tepi tanpa piksel transparan yang memberikan margin ekstra, kecuali mungkin beberapa piksel border untuk drop shadow halus atau efek halus lainnya.
Catatan: Sama seperti kontrol dalam aktivitas, Anda harus memastikan bahwa kontrol interaktif memiliki status fokus dan penekanan yang berbeda menggunakan daftar status yang dapat digambar.
Gambar 5. Piksel border nine-patch yang menunjukkan area yang dapat direntangkan dan pengisi konten.
Beberapa widget aplikasi, seperti yang menggunakan StackView, memiliki latar belakang transparan. Untuk kasus ini, setiap item di StackView harus menggunakan latar belakang nine-patch yang direntangkan tepi-ke-tepi dengan sedikit atau tanpa piksel transparan border untuk margin.
Untuk konten widget, Anda harus menggunakan tata letak yang fleksibel seperti RelativeLayout, LinearLayout, atau FrameLayout. Sama seperti tata letak aktivitas yang harus beradaptasi dengan beragam ukuran layar fisik, tata letak widget harus disesuaikan dengan berbagai ukuran sel petak Layar utama.
Berikut adalah contoh tata letak yang dapat digunakan oleh widget musik yang menampilkan informasi teks dan dua tombol.
Hal ini didasarkan pada diskusi sebelumnya tentang penambahan margin yang bergantung pada versi OS. Perhatikan bahwa cara yang paling efektif dan kuat untuk menambahkan margin ke widget adalah dengan menggabungkan bingkai widget dan konten dalam padding FrameLayout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/widget_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/my_widget_background">
<TextView
android:id="@+id/song_info"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="@+id/play_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
<Button
android:id="@+id/skip_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
Jika Anda melihat contoh widget musik dari bagian sebelumnya, Anda dapat mulai menggunakan atribut tata letak yang fleksibel seperti berikut:
Gambar 6. Kutipan tata letak dan atribut fleksibel.
Saat pengguna menambahkan widget ke layar utama, pada contoh perangkat Android 4.0 yang mana setiap sel petak berukuran 80dp × 100dp dan margin 8dp otomatis diterapkan di semua ukuran, widget akan direntangkan, seperti:
Gambar 7. Widget musik yang ada di contoh petak 80dp x 100dp dengan margin otomatis berukuran 8dp yang ditambahkan oleh sistem.
Menggunakan Paket Template Widget Aplikasi
Saat mulai mendesain widget baru, atau mengupdate widget yang ada, sebaiknya lihat dulu template desain widget di bawah ini. Paket yang dapat didownload di bawah mencakup grafis latar belakang nine-patch, XML, dan file Adobe® Photoshop sumber untuk beberapa kepadatan layar, gaya widget versi OS, dan warna widget. Paket template juga berisi grafis yang berguna untuk menjadikan seluruh widget atau bagian widget Anda (misal, tombol) interaktif.
Gambar 8. Kutipan dari Paket Template Widget Aplikasi (kepadatan sedang, gelap, Android 4.0/gaya sebelumnya, status default/terfokus/ditekan).
Anda bisa mendapatkan arsip Paket Template Widget Aplikasi terbaru dengan link di bawah: