Bố cục tiện ích chuẩn
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.
Tạo bố cục tiện ích hiệu quả bằng cách xác định nội dung cốt lõi của bạn trước tiên. Bố cục của bạn sẽ quy định cách sắp xếp thông tin và các thành phần tương tác trong tiện ích. Android cung cấp một số bố cục tạo sẵn cho thanh công cụ, văn bản, danh sách và tiện ích dạng lưới để đơn giản hoá quy trình này.
Văn bản
Bố cục văn bản là lựa chọn lý tưởng để hiển thị thông tin ngắn gọn. Tăng tính hấp dẫn về hình ảnh của tiện ích bằng cách thêm hình ảnh cùng với văn bản (không bắt buộc).
Chỉ có văn bản
Phù hợp với tiêu đề, nội dung cập nhật trạng thái, nội dung mô tả ngắn hoặc mọi trường hợp mà một dòng văn bản có thể truyền tải thông điệp một cách hiệu quả. Tham khảo Mẫu bố cục chuẩn để biết hướng dẫn về cách tự động điều chỉnh tỷ lệ nội dung văn bản dựa trên kích thước tiện ích.
Văn bản và hình ảnh
Thêm hình ảnh để tăng hiệu quả hình ảnh. Để biết thêm thông tin, hãy xem phần Điểm ngắt để tìm hiểu cách điều chỉnh bố cục này cho nhiều kích thước màn hình.
Sử dụng bố cục thanh công cụ để giúp người dùng truy cập nhanh vào các tác vụ thường dùng trong ứng dụng của bạn, trong một bố cục linh hoạt thích ứng với các kích thước tiện ích.
Thanh công cụ tìm kiếm
Bố cục thanh công cụ tìm kiếm được thiết kế để thu hút sự chú ý đến tính năng tìm kiếm làm thao tác chính trong thanh công cụ. Các nút tiện dụng bổ sung có thể cung cấp quyền truy cập nhanh vào các chức năng thường dùng.
Thanh công cụ
Thanh công cụ hiển thị thương hiệu ứng dụng, theo sau là các nút cho các tác vụ được sử dụng nhiều nhất, phù hợp với các chế độ cài đặt hoặc đường liên kết tác vụ có thể bật/tắt. Khi đổi kích thước, các tuỳ chọn ít được sử dụng có thể bị ẩn để ưu tiên các thao tác phổ biến hơn. Sử dụng điểm ngắt để thêm một nút nhấn tối thiểu mới 48 dp khi có chỗ.
Danh sách
Sử dụng bố cục danh sách để sắp xếp nhiều mục theo định dạng rõ ràng, dễ quét. Kiểu chữ này rất phù hợp với dòng tiêu đề tin tức, danh sách việc cần làm hoặc tin nhắn. Sắp xếp nội dung thành một danh sách có cấu trúc, dễ quét. Chọn giữa bản trình bày dạng vùng chứa hoặc không có vùng chứa dựa trên nhu cầu về nội dung của bạn.
Danh sách văn bản và hình ảnh
Danh sách văn bản và hình ảnh dễ quét là lựa chọn hoàn hảo để giới thiệu nhiều loại nội dung, chẳng hạn như dòng tiêu đề tin tức, danh sách phát có ảnh bìa đĩa nhạc hoặc thông báo.
Danh sách kiểm tra
Bố cục danh sách kiểm tra là lựa chọn hoàn hảo để hiển thị các nhiệm vụ, cung cấp các mục tiêu nhấn rõ ràng để người dùng dễ dàng đánh dấu các mục là đã hoàn thành.
Danh sách thao tác
Cung cấp tính năng nhóm chế độ điều khiển trực quan bằng danh sách thao tác, trong đó trạng thái bật/tắt hình ảnh cung cấp phản hồi tức thì về trạng thái của mục.
Lưới
Trình bày hình ảnh trong một lưới nhỏ gọn, linh hoạt, giàu hình ảnh với nhãn không bắt buộc.
Sử dụng các cột và hàng thích ứng với nhiều kích thước màn hình.
Chỉ hình ảnh
Tạo thư viện hình ảnh có thể cuộn, có tác động mạnh mẽ về mặt hình ảnh bằng cách sử dụng lưới chỉ có hình ảnh. Các hàng và cột tự động điều chỉnh cho phù hợp với nhiều kích thước màn hình để trình bày một cách tối ưu.
Hình ảnh và văn bản
Bạn cũng có thể kết hợp nhãn và nội dung mô tả văn bản, làm phong phú nội dung lưới hình ảnh bằng bối cảnh và thông tin bổ sung.
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,["# Canonical widget layouts\n\nCraft effective widget layouts by first identifying your core content. Your\nlayout dictates how information and interactive elements are organized within\nyour widget. Android offers several prebuilt layouts for toolbars, text, list\nand grid-type widgets to streamline this process.\n| **Note:** View detailed layout specs in our [Figma Widget Canonical Builder](https://goo.gle/widget-canonical), and find the code samples using Jetpack Glance in the [Android Platform Samples GitHub repository](https://github.com/android/platform-samples/tree/main/samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance).\n\nText\n----\n\nText layouts are ideal for displaying concise information. Enhance the visual\nappeal of your widget by optionally including an image alongside the text. \n**Text only**\n\n\nIdeal for titles, status updates, short descriptions, or any scenario\nwhere a single line of text effectively conveys the message. Refer to the\n[Canonical layout sample](https://github.com/android/platform-samples/tree/main/samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance)\nfor guidance on dynamically scaling text content based on widget size. \n**Text and image**\n\n\nInclude an image for added visual impact. For more information, see\n[Breakpoints](/design/ui/mobile/guides/widgets/sizing#breakpoints)\nto learn how to adapt this layout for different screen sizes.\n\nToolbars\n--------\n\nUse toolbar layouts to provide users with quick access to frequently used tasks\nin your app, in a flexible layout that adapts across widget sizes. \n**Search Toolbar**\n\n\nA search toolbar layout is intentionally designed to draw focus to search\nas a primary action in the toolbar. Additional handy buttons can provide\nquick access to frequently used functions.\n\n\n**Toolbar**\n\n\nToolbars presents app branding followed by buttons for the most used tasks\nthat are ideal for toggleable settings or task links. When resizing, less\ncommonly used options can be hidden in favor of more common actions. Use\n[Breakpoints](/design/ui/mobile/guides/widgets/sizing#breakpoints)\nto add a new minimum 48dp tappable button when there's room.\n\n\u003cbr /\u003e\n\nLists\n-----\n\nUse list layouts to organize multiple items in a clear, scannable format. This\nis ideal for news headlines, to-do lists or messages. Organize content into a\nstructured, easily scannable list. Choose between containerized or containerless\npresentation based on your content needs. \n**Text and image list**\n\n\nEasily scannable text and image lists are perfect for showcasing multiple\ncontent types, such as news headlines, playlists with album art, or\nmessages. \n**Checklist**\n\n\nThe checklist layout is perfect for displaying tasks, providing clear tap\ntargets for users to easily mark items as done. \n**Action list**\n\n\nProvide intuitive control grouping with action lists, where visual on/off\nstates offer immediate feedback on item statuses.\n\nGrid\n----\n\nPresent images in a compact, flexible, visually rich grid with optional labels.\nUse columns and rows that adapt to different screen sizes. \n**Image only**\n\n\nCreate visually impactful, scrollable image galleries using image-only\ngrids. Rows and columns automatically adapt to various screen sizes for\noptimal presentation. \n**Image and text**\n\n\nYou can also incorporate text labels and descriptions, enriching your\nimage grid content with additional context and information."]]