Panduan Desain Widget Aplikasi

Widget aplikasi (terkadang hanya "widget") adalah fitur yang diperkenalkan di Android 1.5 dan jauh lebih baik di Android 3.0 dan 3.1. Widget dapat menampilkan informasi aplikasi yang paling aktual atau relevan dengan cepat, di Layar utama pengguna. Image sistem Android standar mencakup beberapa widget, termasuk widget untuk Jam Analog, Musik, dan aplikasi lainnya.

Contoh widget aplikasi di Android 4.0

Gambar 1. Contoh widget aplikasi di Android 4.0.

Dokumen ini menjelaskan cara mendesain widget agar sesuai dengan widget lain dan dengan elemen lain pada Layar utama Android seperti ikon peluncur dan pintasan. Panduan ini juga menjelaskan beberapa standar untuk ilustrasi widget serta beberapa tips dan trik grafis widget.

Untuk mengetahui informasi tentang cara mengembangkan widget, lihat bagian Widget Aplikasi dalam Panduan Developer.

Anatomi Widget Standar

Widget aplikasi Android standar memiliki tiga komponen utama: Kotak pembatas, frame, dan kontrol grafis widget serta elemen lainnya. Widget aplikasi dapat berisi subset widget View di Android; kontrol yang didukung meliputi label teks, tombol, dan gambar. Untuk daftar lengkap View yang tersedia, lihat bagian Membuat Tata Letak Widget Aplikasi di Panduan Developer. Widget yang dirancang dengan baik menyisakan beberapa margin di antara tepi kotak pembatas dan frame, serta padding di antara tepi dalam frame dan kontrol widget.

Widget biasanya memiliki margin dan padding di antara kotak pembatas, bingkai, dan kontrol

Gambar 2. Widget umumnya memiliki margin di antara kotak pembatas dan frame, serta padding di antara kontrol frame dan widget.

Catatan: Mulai Android 4.0, widget aplikasi secara otomatis diberi margin antara frame widget dan kotak pembatas widget aplikasi untuk memberikan perataan yang lebih baik dengan widget dan ikon lain 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 mengambil isyarat dari elemen lain di Layar utama untuk perataan; widget juga menggunakan efek bayangan standar. Semua detail tersebut dijelaskan di halaman ini.

Menentukan ukuran untuk widget Anda

Setiap widget harus menentukan minWidth dan minHeight, yang menunjukkan jumlah minimum ruang yang harus digunakannya secara default. Saat pengguna menambahkan widget ke Layar utama, widget tersebut biasanya akan menempati lebih dari lebar dan tinggi minimum yang Anda tentukan. Layar utama Android menawarkan kepada pengguna petak ruang yang tersedia untuk menempatkan widget dan ikon. Petak ini dapat bervariasi menurut perangkat; misalnya, banyak handset menawarkan petak 4x4, dan tablet dapat menawarkan petak 8x7 yang lebih besar. Saat ditambahkan, widget Anda akan direntangkan agar memenuhi jumlah sel minimum, baik secara horizontal maupun vertikal, yang diperlukan untuk memenuhi batasan minWidth dan minHeight. Seperti yang telah kita bahas dalam Mendesain Tata Letak Widget dan Grafis Latar Belakang di bawah, penggunaan latar belakang nine-patch dan tata letak fleksibel untuk widget aplikasi akan memungkinkan widget Anda beradaptasi dengan baik dengan petak Layar utama perangkat dan tetap dapat digunakan serta terlihat mengagumkan.

Meskipun lebar dan tinggi sel—serta jumlah margin otomatis yang diterapkan pada widget—dapat bervariasi di berbagai perangkat, Anda dapat menggunakan tabel di bawah ini untuk memperkirakan secara kasar dimensi minimum widget, dengan mempertimbangkan jumlah sel petak yang ditempati yang diinginkan:

# dari Sel
(Kolom atau Baris)
Ukuran yang 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, dengan menentukan ukuran minimum yang merender widget dalam status default yang baik. Untuk contoh cara menyediakan minWidth dan minHeight, misalkan Anda memiliki widget pemutar musik yang menampilkan judul dan artis lagu yang sedang diputar (ditumpuk secara vertikal), tombol Putar, dan tombol Berikutnya:

Contoh widget pemutar musik

Gambar 3. Contoh widget pemutar musik.

Tinggi minimum Anda harus tinggi dua TextViews untuk artis dan judul, ditambah beberapa margin teks. Lebar minimum Anda harus lebar minimum yang dapat digunakan dari tombol Play dan Next, ditambah lebar teks minimum (misalnya, lebar 10 karakter), ditambah margin teks horizontal.

Contoh ukuran dan margin untuk penghitungan lebar/tinggi minimum

Gambar 4. Contoh ukuran dan margin untuk penghitungan minWidth/minHeight. Kita memilih 144dp sebagai contoh lebar minimum yang baik untuk label teks.

Contoh penghitungannya adalah sebagai berikut:

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48dp + (2 × 4dp) = 56dp

Jika ada padding konten yang melekat di 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 mulai Android 3.1, yang berarti bahwa minWidth dan minHeight secara efektif menjadi ukuran default untuk widget. Anda dapat menentukan ukuran widget minimum menggunakan minResizeWidth dan minResizeHeight; nilai ini harus menentukan ukuran widget di bawah ini tidak akan 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 yang telah disebutkan, Android 4.0 akan otomatis menambahkan margin standar yang kecil ke setiap tepi widget di Layar utama, untuk aplikasi yang menentukan targetSdkVersion versi 14 atau lebih tinggi. Hal ini membantu menyeimbangkan Layar utama secara visual, sehingga sebaiknya Anda tidak menambahkan margin tambahan di luar bentuk latar belakang widget aplikasi Anda di Android 4.0.

Anda dapat dengan mudah menulis tata letak tunggal yang memiliki margin kustom yang diterapkan untuk versi platform sebelumnya, dan tidak memiliki margin tambahan untuk Android 4.0 dan yang lebih baru. Lihat Menambahkan Margin ke 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. Praktik terbaiknya adalah menentukan bentuk ini menggunakan sembilan patch; satu patch 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. Ini akan memungkinkan bentuk latar belakang widget menggunakan seluruh ruang yang tersedia. Nine-patch harus dibuat dari tepi ke tepi tanpa piksel transparan yang memberikan margin tambahan, simpan mungkin beberapa piksel batas untuk drop shadow halus atau efek halus lainnya.

Catatan: Sama seperti kontrol dalam aktivitas, Anda harus memastikan bahwa kontrol interaktif memiliki status ditekan dan fokus visual yang berbeda menggunakan drawable daftar status.

Piksel border nine-patch

Gambar 5. Piksel batas Nine-patch yang menunjukkan area yang dapat direntangkan dan padding 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 tepi-ke-tepi dengan sedikit atau tanpa piksel transparan batas 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 berbagai ukuran layar fisik, tata letak widget harus juga 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 paling efektif dan tangguh untuk menambahkan margin ke widget adalah dengan menggabungkan frame 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 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

Gambar 6. Kutipan tata letak dan atribut fleksibel.

Saat pengguna menambahkan widget ke layar utama, pada contoh perangkat Android 4.0 dengan setiap sel petak berukuran 80dp × 100dp dan margin 8dp otomatis diterapkan di semua ukuran, widget akan direntangkan, seperti berikut:

Widget musik yang berada di contoh petak 80 dp x 100 dp dengan margin otomatis berukuran 8 dp
  yang ditambahkan oleh sistem

Gambar 7. Widget musik yang berada di contoh petak 80 dp x 100 dp dengan margin otomatis berukuran 8 dp yang ditambahkan oleh sistem.

Menggunakan Paket Template Widget Aplikasi

Saat mulai mendesain widget baru, atau mengupdate widget yang ada, sebaiknya lihat template desain widget di bawah ini terlebih dahulu. Paket yang dapat didownload di bawah ini 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 grafik yang berguna untuk membuat seluruh widget atau bagian widget Anda (misalnya, tombol) menjadi interaktif.

Kutipan template widget

Gambar 8. Kutipan dari Paket Template Widget Aplikasi (kepadatan sedang, gelap, Android 4.0/gaya 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 »