Ringkasan widget aplikasi

Widget adalah aspek penting dari penyesuaian layar utama. Anda dapat menganggapnya sebagai tampilan "sekilas" dari data dan fungsi aplikasi yang paling penting yang dapat diakses langsung di layar utama pengguna. Pengguna dapat memindahkan widget ke seluruh panel layar utama, dan, jika didukung, mengubah ukurannya untuk menyesuaikan jumlah informasi dalam widget sesuai keinginan mereka.

Dokumentasi ini memperkenalkan berbagai jenis widget yang dapat Anda buat dan prinsip desain yang harus diikuti. Untuk mem-build widget aplikasi menggunakan API View Jauh dan tata letak XML, lihat Membuat widget sederhana. Untuk mem-build widget menggunakan API gaya Kotlin dan Compose, lihat Jetpack Glance.

Jenis widget

Saat merencanakan widget, pikirkan jenis widget yang ingin Anda buat. Widget biasanya termasuk dalam salah satu kategori berikut:

Widget informasi

Contoh widget cuaca yang menampilkan Tokyo sebagai sebagian besar
            berawan, 14 derajat, dan suhu yang diproyeksikan mulai pukul
            16.00 hingga 19.00
Gambar 1. Widget informasi dari aplikasi cuaca.

Widget informasi biasanya menampilkan elemen informasi penting dan melacak perubahan informasi tersebut dari waktu ke waktu. Contoh widget informasi adalah widget cuaca, widget jam, atau widget pelacakan skor olahraga. Mengetuk widget informasi biasanya akan meluncurkan aplikasi terkait dan membuka tampilan detail informasi widget.

Widget koleksi

Widget koleksi berspesialisasi dalam menampilkan beberapa elemen dari jenis yang sama, seperti kumpulan gambar dari aplikasi galeri, kumpulan artikel dari aplikasi berita, atau kumpulan email atau pesan dari aplikasi komunikasi. Widget koleksi dapat di-scroll secara vertikal.

Widget koleksi biasanya berfokus pada kasus penggunaan berikut:

  • Menjelajahi koleksi.
  • Membuka elemen koleksi ke tampilan detailnya di aplikasi terkait.
  • Berinteraksi dengan elemen, seperti menandainya selesai—dengan dukungan untuk tombol gabungan di Android 12 (API level 31).

Widget kontrol

Widget untuk aplikasi bernama 'Daftar lampu', yang menampilkan tombol
            berlabel 'Kamar tidur', 'Dapur', dan 'Ruang keluarga', dengan dua tombol
            pertama dinonaktifkan
Gambar 4. Contoh widget kontrol.

Tujuan utama widget kontrol adalah menampilkan fungsi yang sering digunakan sehingga pengguna dapat memicunya dari layar utama tanpa harus membuka aplikasi. Anda dapat menganggapnya sebagai remote control untuk aplikasi. Contoh widget kontrol adalah widget kontrol rumah yang memungkinkan pengguna menyalakan atau mematikan lampu di rumah.

Interaksi dengan widget kontrol dapat membuka tampilan detail yang terkait di aplikasi. Hal ini bergantung pada apakah fungsi widget kontrol menghasilkan data apa pun, seperti pada penggunaan widget penelusuran.

Widget campuran

Aplikasi musik umum yang menampilkan tombol untuk 'tidak suka', kembali, putar/jeda, maju, dan 'suka'. Artis dan
            lagu masing-masing tercantum sebagai 'Artis' dan 'Contoh musik'.
Gambar 5. Contoh widget aplikasi musik.

Meskipun beberapa widget mewakili salah satu jenis di bagian sebelumnya—informasi, koleksi, atau kontrol—banyak widget merupakan gabungan yang menggabungkan elemen dari berbagai jenis. Misalnya, widget pemutar musik pada dasarnya adalah widget kontrol, tetapi juga menunjukkan kepada pengguna lagu yang sedang diputar, seperti widget informasi.

Saat merencanakan widget, desainlah berdasarkan salah satu jenis dasar dan tambahkan elemen jenis lainnya sesuai kebutuhan.

Mengintegrasikan widget dengan Asisten Google

Jenis widget apa pun dapat ditampilkan oleh Asisten Google sebagai respons terhadap perintah suara pengguna. Anda dapat mengonfigurasi widget untuk memenuhi Tindakan Aplikasi, yang memungkinkan pengguna menerima jawaban cepat dan pengalaman aplikasi interaktif di platform Asisten seperti Android dan Android Auto. Untuk mengetahui detail selengkapnya tentang fulfillment widget untuk Asisten, lihat Mengintegrasikan Action Aplikasi dengan widget Android.

Batasan widget

Meskipun widget dapat dipahami sebagai "aplikasi mini", ada beberapa batasan yang penting untuk dipahami sebelum Anda mendesain widget.

Gestur

Karena aktif di layar utama, widget harus digunakan bersama dengan navigasi yang dibuat di sana. Hal ini membatasi dukungan gestur yang tersedia di widget dibandingkan dengan aplikasi layar penuh. Meskipun aplikasi mungkin mengizinkan pengguna berpindah antarlayar secara horizontal, gestur tersebut sudah diambil di layar utama untuk tujuan berpindah antarlayar utama.

Satu-satunya gestur yang tersedia untuk widget adalah sentuh dan geser vertikal.

Elemen

Mengingat batasan gestur yang tersedia untuk widget, beberapa elemen penyusun UI yang mengandalkan gestur yang dibatasi tidak tersedia untuk widget. Untuk daftar lengkap elemen penyusun yang didukung dan informasi selengkapnya tentang batasan tata letak, lihat Membuat tata letak widget dan Menyediakan tata letak widget yang fleksibel.

Panduan desain

Konten widget

Widget adalah cara yang bagus untuk menarik pengguna agar menggunakan aplikasi Anda dengan cara "mengiklankan" konten baru dan menarik yang tersedia di aplikasi Anda.

Seperti teaser pada halaman depan koran, widget menggabungkan dan memusatkan informasi aplikasi, lalu menghubungkan ke detail lebih lanjut dalam aplikasi. Anda dapat mengatakan bahwa widget adalah "hidangan pembuka" informasi, sedangkan aplikasi adalah "hidangan utama"-nya. Pastikan aplikasi Anda menampilkan lebih banyak detail tentang item informasi daripada yang ditampilkan widget.

Selain konten informasi murni, pertimbangkan untuk membuat widget Anda menyediakan link navigasi ke area aplikasi yang sering digunakan. Hal ini memungkinkan pengguna menyelesaikan tugas lebih cepat dan memperluas jangkauan fungsional aplikasi ke layar utama.

Kandidat link navigasi yang baik di widget adalah:

  • Fungsi generatif: ini adalah fungsi yang memungkinkan pengguna membuat konten baru untuk aplikasi, seperti membuat dokumen baru atau pesan baru.

  • Buka aplikasi di tingkat teratas: mengetuk elemen informasi biasanya akan mengarahkan pengguna ke layar detail di tingkat bawah. Memberikan akses ke tingkat teratas aplikasi Anda menawarkan fleksibilitas navigasi yang lebih baik dan dapat menggantikan pintasan aplikasi khusus yang biasanya digunakan pengguna untuk menavigasi ke aplikasi dari layar utama. Menggunakan ikon aplikasi untuk fungsi ini juga dapat memberi widget identitas yang jelas jika data yang ditampilkan kurang spesifik.

Pengubahan ukuran widget

Widget Google Clock standar
Gambar 6. Widget Google Clock standar.

Sentuh lama widget yang dapat diubah ukurannya, lalu lepaskan untuk menempatkan widget ke mode ubah ukuran. Pengguna dapat menggunakan tuas seret atau sudut widget untuk menetapkan ukuran yang diinginkan.

Dengan mengubah ukuran, pengguna dapat menyesuaikan tinggi dan lebar widget dalam batasan petak penempatan layar utama. Anda dapat memutuskan apakah widget dapat diubah ukurannya secara bebas atau dibatasi oleh perubahan ukuran horizontal atau vertikal. Anda tidak perlu mendukung pengubahan ukuran jika widget Anda secara alami memiliki ukuran tetap.

Memungkinkan pengguna mengubah ukuran widget memiliki manfaat penting:

  • Mereka dapat menyesuaikan jumlah informasi yang ingin dilihat di setiap widget.
  • Mereka dapat mengatur tata letak widget dan pintasan dengan lebih baik di panel layar utama.

Rencanakan strategi pengubahan ukuran untuk widget sesuai dengan jenis widget yang Anda buat. Widget koleksi berbasis daftar atau petak biasanya cukup sederhana, karena mengubah ukuran widget akan meluaskan atau mengontraksi area scroll vertikal. Terlepas dari ukuran widget, pengguna masih dapat men-scroll semua elemen informasi untuk menampilkannya.

Widget informasi memerlukan lebih banyak perencanaan langsung, karena tidak dapat di-scroll dan semua konten harus sesuai dengan ukuran yang ditentukan. Anda harus menyesuaikan konten dan tata letak widget secara dinamis dengan ukuran yang ditetapkan pengguna melalui operasi pengubahan ukuran.

Dalam contoh berikut, pengguna dapat mengubah ukuran widget cuaca dalam tiga langkah, yang menampilkan informasi yang lebih lengkap tentang cuaca di lokasi saat ini seiring widget bertambah.

Contoh widget cuaca dalam ukuran petak 3x2 terkecil, dan mencantumkan
            nama lokasi (Tokyo), suhu (14°), dan simbol yang menunjukkan
            cuaca berawan sebagian
Gambar 7. Contoh widget cuaca dalam ukuran 'kecil' petak 3x2.


Contoh widget cuaca dalam ukuran 'sedang' 5x2, termasuk semua
            UI dari ukuran petak 3x2 ditambah label 'sebagian besar berawan' dan
            perkiraan suhu dari pukul 16.00 hingga 19.00
Gambar 8. Contoh widget cuaca dalam ukuran 'sedang' petak 5x2.


Contoh widget cuaca dalam ukuran 'besar' 5x4, termasuk semua UI
            dari ukuran petak 3x2 dan 5x2 serta perkiraan cuaca
            dari Selasa hingga Jumat
Gambar 9. Contoh widget cuaca dalam ukuran 'besar' petak 5x4.

Untuk setiap ukuran widget, tentukan jumlah informasi aplikasi yang ditampilkan. Untuk ukuran yang lebih kecil, fokuskan pada informasi penting, lalu tambahkan informasi kontekstual saat widget bertambah secara horizontal dan vertikal.

Pertimbangan tata letak

Anda mungkin ingin mengatur tata letak widget sesuai dengan dimensi petak penempatan perangkat yang Anda gunakan untuk mengembangkan. Hal ini dapat menjadi perkiraan awal yang berguna, tetapi perhatikan hal-hal berikut:

  • Merencanakan strategi pengubahan ukuran widget di seluruh "bucket ukuran", bukan dimensi petak variabel, akan memberikan hasil yang paling andal.
  • Jumlah, ukuran, dan jarak sel antar setiap perangkat dapat sangat bervariasi. Oleh karena itu, sangat penting untuk memastikan widget Anda fleksibel dan dapat menampung lebih banyak atau sedikit ruang daripada yang diperkirakan.
  • Saat pengguna mengubah ukuran widget, sistem akan merespons dengan rentang ukuran dp yang dapat digunakan untuk menggambar ulang widget Anda.
  • Mulai Android 12, Anda dapat memberikan atribut ukuran yang lebih baik dan tata letak yang lebih fleksibel. Hal ini mencakup:

Konfigurasi widget oleh pengguna

Terkadang, pengguna perlu menyiapkan widget sebelum dapat digunakan. Misalnya, widget email yang mengharuskan pengguna memilih folder email sebelum kotak masuk dapat ditampilkan atau widget foto statis yang mengharuskan pengguna menetapkan gambar dari galeri untuk ditampilkan. Widget Android menampilkan pilihan konfigurasinya tepat setelah pengguna menempatkan widget ke layar utama.

Checklist desain widget

  • Fokus pada bagian kecil informasi yang dapat dilihat di widget Anda. Perluas informasi di aplikasi Anda.
  • Pilih jenis widget yang tepat untuk tujuan Anda.
  • Rencanakan bagaimana konten untuk widget Anda beradaptasi dengan berbagai ukuran.
  • Buat tata letak widget Anda independen dari orientasi dan perangkat dengan memastikan tata letak dapat diluaskan dan diperkecil.
  • Pertimbangkan apakah widget Anda memerlukan konfigurasi tambahan.