Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Buat desain widget Android yang dapat disesuaikan dan diskalakan dengan lancar. Gunakan ukuran default
yang direkomendasikan sebagai titik awal, dan uji tata letak Anda di berbagai
dimensi untuk memastikan keterbacaan dan pengalaman pengguna yang optimal.
Ukuran default
Berikan pengalaman widget yang rapi dengan mengoptimalkan tata letak Anda untuk setidaknya satu
ukuran yang direkomendasikan. Pastikan penempatan dan visibilitas yang benar di pemilih
widget dengan menentukan atribut targetCellWidth dan targetCellHeight untuk
perangkat genggam dan tablet.
Nilai ini didasarkan pada perangkat Pixel. Gunakan ukuran ini sebagai titik awal
untuk desain widget Anda. Uji widget Anda secara menyeluruh dalam berbagai ukuran dan di
berbagai perangkat untuk memastikan pengalaman pengguna yang berkualitas.
Genggam
Ukuran
Lebar min
Lebar maks
Tinggi min
Tinggi maks
2x1
109
306
56
130
2x2
109
306
115
276
2x3
109
306
185
422
4x1
245
624
56
130
4x2
245
624
115
276
4x3
245
624
185
422
Tablet
Ukuran
Lebar min
Lebar maks
Tinggi min
Tinggi maks
2x1
180
304
64
120
2x2
180
304
184
304
2x3
180
304
304
488
3x1
328
488
64
120
3x2
298
488
184
304
3x3
298
488
304
488
3x4
298
488
424
672
Titik henti sementara
Titik henti sementara sangat penting untuk membuat widget yang dapat disesuaikan, mudah digunakan, dan dapat diubah ukurannya. Dengan menguji desain, Anda dapat menentukan nilai minimum ukuran yang memerlukan
penyesuaian tata letak. Terapkan titik henti sementara untuk memicu perubahan ini,
yang memastikan widget Anda mempertahankan daya tarik visual dan fungsionalitas dalam ukuran apa pun.
Titik henti sementara juga menawarkan fleksibilitas untuk menyertakan atau mengecualikan
konten tambahan secara kondisional, yang mengoptimalkan penggunaan ruang berdasarkan dimensi
widget.
Gambar 1: Gunakan titik henti sementara untuk membuat perubahan tata letak pada berbagai ukuran.
Mengisi batas
Salah satu alasan utama pengguna menghapus widget adalah karena ketidaksesuaian dengan
elemen layar utama lainnya. Untuk mencegah hal ini, pastikan widget Anda selalu mengisi
ruang petak yang dialokasikan sepenuhnya.
check_circle
Anjuran
Pastikan penampung meluas dari tepi ke tepi di semua ukuran.
cancel
Larangan
Menambahkan padding kustom. Widget Anda akan berjalan dengan lancar dari tepi ke tepi.
check_circle
Anjuran
Pastikan bentuk non-persegi panjang Anda menyentuh petak pada sumbu vertikal atau horizontal untuk konsistensi visual.
cancel
Larangan
Gunakan bentuk persegi tetap. Sebagai gantinya, gunakan penampung persegi panjang responsif yang menyesuaikan dengan berbagai dimensi petak.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Sizing\n\nDesign adaptable Android widgets that scale seamlessly. Use our recommended\ndefault sizes as a starting point, and test your layouts across different\ndimensions to ensure optimal readability and user experience.\n\nDefault sizes\n-------------\n\nDeliver a polished widget experience by optimizing your layout for at least one\nof our recommended sizes. Ensure correct placement and visibility in the widget\npicker by defining `targetCellWidth` and `targetCellHeight` attributes for both\nhandheld and tablet devices.\n\nThese values are based off Pixel devices. Use these sizes as a starting point\nfor your widget design. Thoroughly test your widget at different sizes and on\nvarious devices to ensure a quality user experience. \n\n### Handheld\n\n\n| Sizes | Min width | Max width | Min height | Max height |\n|-------|-----------|-----------|------------|------------|\n| 2x1 | 109 | 306 | 56 | 130 |\n| 2x2 | 109 | 306 | 115 | 276 |\n| 2x3 | 109 | 306 | 185 | 422 |\n| 4x1 | 245 | 624 | 56 | 130 |\n| 4x2 | 245 | 624 | 115 | 276 |\n| 4x3 | 245 | 624 | 185 | 422 |\n\n\u003cbr /\u003e\n\n### Tablet\n\n\n| Sizes | Min width | Max width | Min height | Max height |\n|-------|-----------|-----------|------------|------------|\n| 2x1 | 180 | 304 | 64 | 120 |\n| 2x2 | 180 | 304 | 184 | 304 |\n| 2x3 | 180 | 304 | 304 | 488 |\n| 3x1 | 328 | 488 | 64 | 120 |\n| 3x2 | 298 | 488 | 184 | 304 |\n| 3x3 | 298 | 488 | 304 | 488 |\n| 3x4 | 298 | 488 | 424 | 672 |\n\n\u003cbr /\u003e\n\n| **Note:** Widget dimensions in the table encompass all device orientations, including landscape mode on phones, to ensure optimal functionality in a variety of scenarios.\n\nBreakpoints\n-----------\n\nBreakpoints are essential for crafting adaptable, user-friendly resizable\nwidgets. By testing your design, you can pinpoint size thresholds where layout\nadjustments are necessary. Implement breakpoints to trigger these changes,\nensuring your widget maintains visual appeal and functionality at any size.\n\nBreakpoints also offer the flexibility to conditionally include or exclude\nsupplemental content, optimizing space utilization based on the widget's\ndimensions.\n**Figure 1:** Use breakpoints to make layout changes at different sizes.\n\nFill the bounds\n---------------\n\nOne of the primary reasons users remove widgets is due to misalignment with\nother home screen elements. To prevent this, ensure your widget always fills its\nallocated grid space completely. \ncheck_circle\n\n### Do\n\nMake sure the container stretches edge-to-edge at all sizes. \ncancel\n\n### Don't\n\nAdd custom padding. Your widget should go seamlessly edge-to-edge. \ncheck_circle\n\n### Do\n\nEnsure your non-rectangular shape touches the grid on either the vertical or horizontal axis for visual consistency. \ncancel\n\n### Don't\n\nUse fixed square shapes. Instead, use responsive rectangular containers that adapt to various grid dimensions."]]
