Widget aplikasi (terkadang hanya "widget") adalah fitur yang diperkenalkan di Android 1.5 dan meningkat pada Android 3.0 dan 3.1. Widget dapat menampilkan waktu aplikasi paling tepat waktu atau sebaliknya informasi yang relevan secara sekilas, di layar Beranda pengguna. Image sistem Android standar mencakup beberapa widget, termasuk widget untuk Jam Analog, Musik, dan menggunakan berbagai aplikasi obrolan.
![Contoh widget aplikasi di Android 4.0](https://developer.android.google.cn/static/images/widget_design/widget_examples.png?authuser=0000&hl=id)
Gambar 1. Contoh widget aplikasi di Android 4.0.
Dokumen ini menjelaskan cara mendesain widget agar sesuai secara grafis dengan widget lain dan dengan elemen lain dari Layar utama Android seperti ikon peluncur dan pintasan. Ini juga menjelaskan beberapa standar untuk poster widget serta beberapa tips dan trik grafis widget.
Untuk informasi tentang cara mengembangkan widget, lihat bagian Widget Aplikasi di Panduan.
Anatomi Widget Standar
Widget aplikasi Android standar memiliki tiga komponen utama: Kotak pembatas, bingkai, dan elemen kontrol grafis dan elemen lainnya. Widget aplikasi dapat berisi subset widget View di Android kontrol yang didukung meliputi label teks, tombol, dan gambar. Untuk daftar lengkap ketersediaan View, lihat Membuat Bagian Tata Letak Widget Aplikasi di Panduan Developer. Widget yang dirancang dengan baik meninggalkan margin antara tepi kotak pembatas dan {i>frame<i}, dan {i>padding<i} di antara tepi bagian dalam {i>frame<i} dan kontrol {i>widget<i}.
![Widget biasanya memiliki margin dan padding di antara kotak pembatas, bingkai, dan kontrol](https://developer.android.google.cn/static/images/widget_design/widget_terms.png?authuser=0000&hl=id)
Gambar 2. Widget umumnya memiliki margin antara kotak pembatas dan bingkai, serta padding di antara bingkai dan kontrol widget.
Catatan: Mulai Android 4.0, widget aplikasi otomatis disediakan margin antara bingkai widget dan kotak pembatas widget aplikasi untuk memberikan penyelarasan yang lebih baik dengan widget dan ikon lain di layar beranda pengguna. Untuk memanfaatkan rekomendasi ini, tetapkan targetSdkVersion aplikasi ke 14 atau lebih besar.
Widget yang didesain agar pas secara visual dengan widget lain di Layar utama mengambil isyarat dari widget lain elemen di layar Beranda untuk penyelarasan; mereka juga menggunakan efek bayangan standar. Semua pilihan di atas detailnya dijelaskan di halaman ini.
Menentukan ukuran untuk widget Anda
Setiap widget harus menentukan minWidth
dan minHeight
, yang menunjukkan
ruang minimum yang harus digunakannya secara {i>default<i}. Saat pengguna menambahkan widget ke Layar utama,
biasanya akan menempati lebih dari lebar dan tinggi minimum yang Anda tentukan. Layar utama Android
menawarkan kepada pengguna kisi-kisi ruang yang tersedia di mana mereka dapat menempatkan widget dan ikon. Kisi-kisi ini dapat
bervariasi menurut perangkat; misalnya, banyak handset menawarkan kisi 4x4, dan tablet dapat menawarkan
{i>grid.<i} Jika ditambahkan, widget akan direntangkan agar memenuhi jumlah sel minimum,
secara horizontal dan vertikal, diperlukan untuk memenuhi minWidth
dan
minHeight
batasan. Seperti yang kita bahas dalam Mendesain Widget
Tata Letak dan Grafis Latar Belakang di bawah, menggunakan latar belakang nine-patch dan tata letak yang fleksibel untuk aplikasi
akan memungkinkan widget Anda beradaptasi dengan lancar ke petak Layar utama perangkat dan tetap
dapat digunakan dan mengagumkan secara estetika.
Meskipun lebar dan tinggi sel—serta jumlah margin otomatis yang diterapkan — dapat bervariasi di berbagai perangkat, Anda dapat menggunakan tabel di bawah ini untuk memperkirakan biaya widget dimensi minimum, berdasarkan jumlah sel petak yang ditempati yang diinginkan:
# dari Sel (Kolom atau Baris) |
Ukuran Tersedia (dp) ( minWidth atau
minHeight ) |
---|---|
1 | 40dp |
2 | 110dp |
3 | 180dp |
4 | 250dp |
… | … |
n | 70 × n − 30 |
Sebaiknya Anda bersikap konservatif terhadap minWidth
dan minHeight
,
menentukan ukuran minimum yang merender widget dalam status default yang baik. Sebagai contoh bagaimana
untuk memberikan minWidth
dan minHeight
, misalkan Anda memiliki pemutar musik
yang menampilkan artis dan judul lagu yang sedang diputar (ditumpuk secara vertikal),
Tombol Putar, dan tombol Berikutnya:
![Contoh widget pemutar musik](https://developer.android.google.cn/static/images/widget_design/music_example.png?authuser=0000&hl=id)
Gambar 3. Contoh widget pemutar musik.
Tinggi minimum Anda harus tinggi dari kedua TextViews untuk artis dan judul, plus beberapa margin teks. Lebar minimum Anda harus lebar minimum yang dapat digunakan Tombol Play dan Next, ditambah lebar teks minimum (misalnya, lebar 10 karakter), ditambah setiap margin teks horizontal.
![Contoh ukuran dan margin untuk penghitungan lebar/tinggi minimum](https://developer.android.google.cn/static/images/widget_design/music_example_red_line.png?authuser=0000&hl=id)
Gambar 4. Contoh ukuran dan margin untuk
minWidth
/minHeight
penghitungan. Kami memilih 144 dp sebagai contoh 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 yang melekat di latar belakang widget nine-patch, 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 di bawah ini yang akan menjadi widget
tidak terbaca atau tidak dapat
digunakan.
Ini umumnya adalah fitur pilihan untuk widget koleksi seperti yang didasarkan pada ListView
atau GridView
.
Menambahkan margin ke widget aplikasi Anda
Seperti disebutkan sebelumnya, Android 4.0 akan secara otomatis menambahkan margin kecil standar ke setiap tepi
widget di Layar utama, untuk aplikasi yang menentukan targetSdkVersion
dari 14
atau lebih besar. Hal ini membantu menyeimbangkan Layar utama secara visual, dan oleh karena itu sebaiknya Anda
jangan tambahkan margin tambahan di luar bentuk latar belakang widget aplikasi Anda di Android
4.0.
Sangat mudah untuk menulis tata letak tunggal dengan {i>custom margin<i} yang diterapkan untuk versi sebelumnya platform ini, dan tidak memiliki margin tambahan untuk Android 4.0 dan yang lebih baru. Lihat Menambahkan Margin ke Widget Aplikasi dalam Panduan Developer untuk mendapatkan informasi tentang cara melakukannya 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 yang terbaik berlatih mendefinisikan bentuk ini menggunakan sembilan {i>patch<i}; satu untuk setiap kepadatan layar (lihat Mendukung Beberapa Layar untuk detailnya). Nine-patch dapat dibuat dengan alat draw9patch, atau cukup dengan program pengeditan grafis seperti Adobe® Photoshop. Tindakan ini akan memungkinkan bentuk latar belakang widget untuk menggunakan seluruh ruang yang tersedia. nine-patch harus dari tepi ke tepi tanpa transparan piksel yang memberikan margin tambahan, kecuali beberapa piksel batas untuk halus {i>drop shadow<i} atau efek halus lainnya.
Catatan: Sama seperti kontrol dalam aktivitas, Anda harus memastikan bahwa kontrol interaktif memiliki status fokus dan tekanan visual yang berbeda menggunakan daftar status drawable.
![Piksel border nine-patch](https://developer.android.google.cn/static/images/ninepatch_raw.png?authuser=0000&hl=id)
Gambar 5. Piksel batas nine-patch yang menunjukkan dapat direntangkan dan padding konten.
Beberapa widget aplikasi, seperti yang menggunakan StackView
, memiliki
latar belakang. Untuk hal ini, setiap item individual dalam StackView harus menggunakan latar belakang {i>nine-patch<i}
tepi-ke-tepi dengan sedikit atau tanpa {i>
frame<i} transparan {i>border<i} untuk margin.
Untuk konten widget, Anda harus menggunakan tata letak yang fleksibel seperti RelativeLayout
, LinearLayout
, atau FrameLayout
. Sama seperti tata letak aktivitas Anda yang harus beradaptasi dengan berbagai layar fisik
ukuran, tata letak widget harus beradaptasi 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 tangguh dan tangguh untuk menambahkan margin ke widget adalah dengan menggabungkan bingkai dan konten widget
dalam FrameLayout
dengan padding.
<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 sekarang Anda melihat contoh widget musik dari bagian sebelumnya, Anda dapat mulai menggunakan atribut tata letak yang fleksibel seperti berikut:
![Kutipan atribut dan tata letak fleksibel untuk contoh widget musik](https://developer.android.google.cn/static/images/widget_design/music_example_layouts.png?authuser=0000&hl=id)
Gambar 6. Kutipan tata letak dan atribut fleksibel.
Saat pengguna menambahkan widget ke layar utama, pada contoh perangkat Android 4.0 yang masing-masing sel petak berukuran 80dp × 100dp dan margin 8dp otomatis diterapkan pada semua ukuran, widget akan direntangkan, seperti ini:
![Widget musik berada di contoh petak 80 dp x 100 dp dengan margin otomatis 8 dp
ditambahkan oleh sistem](https://developer.android.google.cn/static/images/widget_design/music_example_stretched.png?authuser=0000&hl=id)
Gambar 7. Widget musik berada di contoh 80dp x 100dp dengan margin otomatis 8 dp yang ditambahkan oleh sistem.
Menggunakan Paket Template Widget Aplikasi
Saat mulai merancang widget baru, atau memperbarui widget yang ada, ada baiknya untuk terlebih dahulu lihat template desain widget di bawah ini. Paket yang dapat didownload di bawah ini mencakup nine-patch grafik latar belakang, XML, dan file Adobe® Photoshop sumber untuk beberapa kepadatan layar, OS versi, dan warna widget. Paket {i>template<i} juga berisi grafik yang berguna untuk membuat seluruh widget atau bagian dari widget Anda (misalnya, tombol) menjadi interaktif.
![Kutipan template widget](https://developer.android.google.cn/static/images/widget_design/widget_template_excerpts.png?authuser=0000&hl=id)
Gambar 8. Cuplikan dari Paket Template Widget Aplikasi (kepadatan sedang, gelap, gaya Android 4.0/sebelumnya, status default/fokus/ditekan).
Anda bisa mendapatkan arsip Paket Template Widget Aplikasi terbaru dengan link di bawah:
Download Paket Template Widget Aplikasi untuk Android 4.0 »