Ringkasan widget aplikasi

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

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

Jenis widget

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

Widget informasi

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

Widget informasi biasanya menampilkan elemen informasi penting dan memantau bagaimana informasi tersebut berubah 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 mendetail informasi widget.

Widget koleksi

Widget koleksi dikhususkan untuk menampilkan beberapa elemen dengan jenis yang sama, seperti koleksi 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 sebagai selesai—dengan dukungan untuk tombol gabungan di Android 12 (API level 31).

Widget kontrol

Widget untuk aplikasi bernama 'Daftar lampu', yang menampilkan tombol alih
            berlabel 'Kamar Tidur,' 'Dapur', dan 'Ruang tamu', 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 sebuah aplikasi. Contoh widget kontrol adalah widget kontrol rumah yang memungkinkan pengguna menyalakan atau mematikan lampu di rumah.

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

Widget campuran

Aplikasi musik umum yang menampilkan tombol untuk 'jempol ke bawah,' kembali, putar/jeda, maju, dan 'jempol ke atas'. Artis dan lagu masing-masing akan tercantum sebagai 'Artis' dan 'Contoh musik'.
Gambar 5. Contoh widget aplikasi musik.

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

Saat merencanakan widget, desain dengan salah satu jenis dasar dan tambahkan elemen jenis lain sesuai kebutuhan.

Mengintegrasikan widget dengan Asisten Google

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

Batasan widget

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

Gestur

Karena aktif di layar utama, widget harus berdampingan dengan navigasi yang ditetapkan di sana. Hal ini membatasi dukungan gestur yang tersedia di widget dibandingkan dengan aplikasi layar penuh. Meskipun aplikasi mungkin mengizinkan pengguna bernavigasi antar-layar secara horizontal, gestur tersebut sudah diterapkan di layar utama untuk berpindah antar-layar utama.

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

Elemen

Mengingat keterbatasan gestur yang tersedia untuk widget, beberapa elemen penyusun UI yang mengandalkan gestur terbatas 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 ke aplikasi Anda dengan "mengiklankan" konten baru dan menarik yang tersedia di aplikasi Anda.

Sama seperti teaser di halaman depan koran, widget menggabungkan dan memusatkan informasi aplikasi dan memberikan koneksi ke detail yang lebih lengkap dalam aplikasi. Anda dapat mengatakan bahwa widget adalah informasi "camilan" sedangkan aplikasi adalah "makanan". Pastikan aplikasi Anda menampilkan detail item informasi yang lebih lengkap 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 dengan lebih cepat dan memperluas jangkauan fungsional aplikasi ke layar utama.

Kandidat yang baik untuk link navigasi di widget adalah:

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

  • Buka aplikasi di tingkat atas: mengetuk elemen informasi biasanya akan mengarahkan pengguna ke layar detail tingkat yang lebih rendah. Memberikan akses ke tingkat teratas aplikasi Anda menawarkan fleksibilitas navigasi yang lebih besar dan dapat mengganti pintasan aplikasi khusus yang digunakan pengguna untuk menavigasi ke aplikasi dari layar utama. Penggunaan ikon aplikasi Anda untuk fungsi ini juga dapat memberikan identitas yang jelas kepada widget jika data yang Anda tampilkan ambigu.

Pengubahan ukuran widget

Widget Google Clock Standar
Gambar 6. Widget Jam Google standar.

Menyentuh lama widget yang dapat diubah ukurannya, lalu melepaskannya akan menempatkan widget ke dalam mode ubah ukuran. Pengguna dapat menggunakan tuas tarik atau sudut widget untuk menyetel ukuran yang diinginkan.

Perubahan ukuran memungkinkan pengguna menyesuaikan tinggi dan lebar widget dalam batasan petak penempatan layar utama. Anda dapat memutuskan apakah widget dapat diubah ukurannya secara bebas atau dibatasi untuk perubahan ukuran horizontal atau vertikal. Anda tidak perlu mendukung perubahan ukuran jika widget Anda berukuran tetap.

Mengizinkan pengguna mengubah ukuran widget memiliki manfaat penting:

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

Rencanakan strategi pengubahan ukuran untuk widget Anda sesuai dengan jenis widget yang Anda buat. Widget koleksi berbasis daftar atau petak biasanya mudah dilakukan, karena mengubah ukuran widget akan memperluas atau menciutkan area scroll vertikal. Terlepas dari ukuran widget, pengguna tetap dapat men-scroll semua elemen informasi ke tampilan.

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

Pada contoh berikut, pengguna dapat mengubah ukuran widget cuaca dalam tiga langkah, yang mengekspos informasi yang lebih lengkap tentang cuaca di lokasi saat ini seiring dengan perkembangan widget.

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


Contoh widget cuaca dalam ukuran 'sedang' 5x2, termasuk semua
            UI dari ukuran petak 3x2 plus label 'sebagian besar berawan' dan
            memperkirakan 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 ditambah perkiraan cuaca
            dari Selasa hingga Jumat
Gambar 9. Contoh widget cuaca dalam ukuran 'besar' petak 5x4.

Untuk setiap ukuran widget, tentukan seberapa banyak informasi aplikasi Anda yang ditampilkan. Untuk ukuran yang lebih kecil, berkonsentrasilah pada informasi penting, lalu tambahkan informasi kontekstual saat widget berkembang secara horizontal dan vertikal.

Pertimbangan tata letak

Anda mungkin ingin menata letak widget sesuai dengan dimensi petak penempatan perangkat yang digunakan untuk melakukan pengembangan. Cara ini dapat menjadi perkiraan awal yang berguna, tetapi perhatikan hal-hal berikut:

  • Merencanakan strategi pengubahan ukuran widget di berbagai "bucket ukuran", bukan dimensi petak variabel, akan memberikan hasil yang paling andal.
  • Jumlah, ukuran, dan jarak sel dapat sangat bervariasi dari satu perangkat ke perangkat lainnya. Oleh karena itu, widget Anda harus fleksibel dan dapat mengakomodasi lebih banyak atau lebih sedikit ruang dari 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. Bayangkan widget email yang mengharuskan pengguna memilih folder email sebelum kotak masuk ditampilkan, atau widget foto statis yang mengharuskan pengguna menetapkan gambar dari galeri agar dapat ditampilkan. Widget Android menampilkan pilihan konfigurasinya tepat setelah pengguna meletakkan 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 adaptasi konten untuk widget Anda dengan berbagai ukuran.
  • Buat tata letak widget Anda secara terpisah dari orientasi dan perangkat dengan memastikan tata letak dapat direntangkan dan berkontraksi.
  • Pertimbangkan apakah widget Anda memerlukan konfigurasi tambahan atau tidak.