Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Thiết kế các tiện ích Android có thể thích ứng và điều chỉnh theo tỷ lệ một cách liền mạch. Hãy sử dụng kích thước mặc định được đề xuất làm điểm xuất phát và kiểm thử bố cục trên nhiều kích thước để đảm bảo khả năng đọc và trải nghiệm người dùng ở mức tối ưu.
Kích thước mặc định
Cung cấp trải nghiệm tiện ích tinh tế bằng cách tối ưu hoá bố cục cho ít nhất một trong các kích thước mà chúng tôi đề xuất. Đảm bảo vị trí và chế độ hiển thị chính xác trong bộ chọn tiện ích bằng cách xác định các thuộc tính targetCellWidth và targetCellHeight cho cả thiết bị cầm tay và máy tính bảng.
Các giá trị này dựa trên thiết bị Pixel. Hãy sử dụng các kích thước này làm điểm xuất phát cho thiết kế tiện ích. Kiểm thử kỹ tiện ích của bạn ở nhiều kích thước và trên nhiều thiết bị để đảm bảo trải nghiệm người dùng chất lượng cao.
Cầm tay
Kích thước
Chiều rộng tối thiểu
Chiều rộng tối đa
Chiều cao tối thiểu
Chiều cao tối đa
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
Máy tính bảng
Kích thước
Chiều rộng tối thiểu
Chiều rộng tối đa
Chiều cao tối thiểu
Chiều cao tối đa
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
Điểm ngắt
Điểm ngắt là yếu tố cần thiết để tạo các tiện ích có thể thay đổi kích thước, dễ sử dụng và thích ứng. Bằng cách kiểm thử thiết kế, bạn có thể xác định chính xác các ngưỡng kích thước cần điều chỉnh bố cục. Triển khai các điểm ngắt để kích hoạt những thay đổi này, đảm bảo tiện ích của bạn duy trì tính hấp dẫn về hình ảnh và chức năng ở mọi kích thước.
Điểm ngắt cũng mang lại sự linh hoạt để đưa vào hoặc loại trừ nội dung bổ sung theo điều kiện, tối ưu hoá việc sử dụng không gian dựa trên kích thước của tiện ích.
Hình 1: Sử dụng điểm ngắt để thay đổi bố cục ở nhiều kích thước.
Điền giới hạn
Một trong những lý do chính khiến người dùng xoá tiện ích là do không căn chỉnh với các thành phần khác trên màn hình chính. Để ngăn chặn điều này, hãy đảm bảo tiện ích của bạn luôn lấp đầy hoàn toàn không gian lưới được phân bổ.
check_circle
Nên
Đảm bảo vùng chứa trải dài từ cạnh này sang cạnh kia ở mọi kích thước.
cancel
Không nên
Thêm khoảng đệm tuỳ chỉnh. Tiện ích của bạn phải chạy liền mạch từ cạnh này sang cạnh kia.
check_circle
Nên
Đảm bảo hình dạng không phải hình chữ nhật của bạn chạm vào lưới theo trục dọc hoặc trục ngang để đảm bảo tính nhất quán về hình ảnh.
cancel
Không nên
Sử dụng hình vuông cố định. Thay vào đó, hãy sử dụng các vùng chứa hình chữ nhật thích ứng với nhiều kích thước lưới.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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."]]