Ringkasan widget aplikasi

Widget adalah aspek penting dari penyesuaian layar utama. Anda dapat menganggapnya sebagai tampilan "sekilas" dari data dan fungsi terpenting aplikasi 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 di widget sesuai keinginan mereka.

Dokumentasi ini memperkenalkan berbagai jenis widget yang dapat Anda buat dan prinsip desain yang harus diikuti. Untuk membuat widget aplikasi menggunakan Remove View API 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 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 bagaimana informasi tersebut berubah dari waktu ke waktu. Contoh widget informasi adalah widget cuaca, widget jam, atau widget pemantauan skor olahraga. Mengetuk widget informasi biasanya akan meluncurkan aplikasi terkait dan membuka tampilan mendetail tentang informasi widget.

Widget koleksi

Widget koleksi memiliki spesialisasi dalam 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 cahaya', yang menampilkan tombol beralih
            berlabel 'Kamar Tidur', 'Dapur', dan 'Ruang tamu', dengan dua tombol
            pertama yang 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 rumah.

Berinteraksi dengan widget kontrol dapat membuka tampilan detail terkait dalam aplikasi. Hal ini bergantung pada apakah fungsi widget kontrol menghasilkan data, seperti dalam kasus 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 dalam 'Artis' dan 'Contoh musik'.
Gambar 5. Contoh widget aplikasi musik.

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

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

Mengintegrasikan widget dengan Asisten Google

Semua jenis widget dapat ditampilkan oleh Asisten Google sebagai respons atas 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 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 bernavigasi antar-layar secara horizontal, gestur tersebut sudah digunakan di layar utama untuk tujuan navigasi 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 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 efektif untuk menarik pengguna ke aplikasi Anda dengan "mengiklankan" konten baru dan menarik yang tersedia di aplikasi Anda.

Sama seperti teaser di halaman depan surat kabar, widget menggabungkan dan mengonsentrasi informasi aplikasi serta menghubungkan ke detail yang lebih lengkap di dalam aplikasi. Bisa dibilang widget adalah informasi "camilan" sedangkan aplikasi adalah "makanan". Pastikan aplikasi Anda menampilkan lebih banyak detail tentang item informasi daripada yang ditampilkan oleh widget.

Selain konten informasi murni, sebaiknya buat 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 link navigasi yang baik pada widget adalah:

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

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

Pengubahan ukuran widget

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

Menyentuh & menahan widget yang dapat diubah ukurannya, lalu melepaskannya akan mengalihkan widget ke 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 pengubahan ukuran jika widget Anda memiliki ukuran 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 perubahan ukuran untuk widget 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 masih dapat men-scroll semua elemen informasi hingga terlihat.

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

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

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' dengan petak 3x2.


Contoh widget cuaca dalam ukuran 'sedang' 5x2, yang mencakup 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' dengan 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' dengan petak 5x4.

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

Pertimbangan tata letak

Anda mungkin ingin menata letak widget sesuai dengan dimensi petak penempatan perangkat yang Anda kembangkan. Hal ini dapat menjadi perkiraan awal yang berguna, tetapi perhatikan poin-poin berikut:

  • Merencanakan strategi pengubahan ukuran widget di seluruh "bucket ukuran", bukan dimensi petak variabel, akan memberi Anda hasil yang paling dapat diandalkan.
  • Jumlah, ukuran, dan spasi sel dapat sangat bervariasi dari satu perangkat ke perangkat lainnya. Oleh karena itu, widget harus fleksibel dan dapat mengakomodasi lebih banyak atau lebih sedikit ruang daripada yang diperkirakan.
  • Saat pengguna mengubah ukuran widget, sistem akan merespons dengan rentang ukuran dp yang dapat digunakan widget Anda untuk menggambar ulang dirinya sendiri.
  • Mulai Android 12, Anda dapat memberikan atribut ukuran yang lebih baik dan tata letak yang lebih fleksibel. Hal ini mencakup:

Konfigurasi widget berdasarkan pengguna

Terkadang, pengguna perlu menyiapkan widget sebelum widget tersebut berguna. Bayangkan widget email tempat pengguna perlu memilih folder email sebelum kotak masuk dapat ditampilkan, atau widget foto statis tempat pengguna harus menetapkan gambar dari galeri untuk 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 bagaimana konten widget Anda beradaptasi dengan berbagai ukuran.
  • Pastikan tata letak widget Anda terpisah dari orientasi dan perangkat dengan memastikan tata letak dapat direntangkan dan diciutkan.
  • Pertimbangkan apakah widget Anda memerlukan konfigurasi tambahan.