Contoh Android Auto dan Android Automotive OS (AAOS) berikut dibuat
menggunakan template Grid.
Petak tindakan yang disematkan di template Peta + KontenPetak dengan item yang diaktifkan dan satu item yang dinonaktifkan
Persyaratan UX {i>template<i} {i>grid<i}
Developer aplikasi:
SEBAIKNYA
Batasi panjang string teks primer dan sekunder agar tidak
terpotong.
SEBAIKNYA
Memiliki tindakan yang terkait dengan setiap item petak (item khusus informasi
tidak direkomendasikan).
SEBAIKNYA
Menunjukkan dengan jelas status item (untuk item petak yang memiliki beberapa status,
seperti dipilih dan tidak dipilih) dengan variasi gambar, ikon, atau teks.
SEBAIKNYA
Sertakan header dengan judul opsional serta tindakan utama dan sekunder.
Menampilkan indikator lingkaran berputar pemuatan, bukan ikon atau gambar untuk item petak
saat tindakan yang terkait dengan item tersebut sedang berlangsung.
[null,null,["Terakhir diperbarui pada 2025-07-25 UTC."],[[["\u003cp\u003eThe Grid template showcases items in a grid layout, primarily using images for selection, and is ideal for apps focused on visual browsing.\u003c/p\u003e\n"],["\u003cp\u003eIt can be integrated within the Tab or Map + Content templates for enhanced navigation and display options.\u003c/p\u003e\n"],["\u003cp\u003eEach grid item can include an image/icon, primary and secondary text, and triggers an action, with clear visual distinction for item states.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers should prioritize concise text, associate actions with each item, and indicate item states visually, while adhering to header and action element usage guidelines.\u003c/p\u003e\n"],["\u003cp\u003eThere's a limit on visible grid items, retrievable via the ConstraintManager API, and loading spinners can be used to signal ongoing actions.\u003c/p\u003e\n"]]],[],null,["# Grid template\n\n\u003cbr /\u003e\n\nGrids present items in a grid layout.\n\nThis template is useful when users rely primarily on images to make their\nselections.\n\nThis template can be embedded in the\n[Tab template](/cars/design/create-apps/apps-for-drivers/templates/tab-template)\nto provide tabbed navigation.\n\nThis template can be included in the\n[Map + Content template](/cars/design/create-apps/apps-for-drivers/templates/map-content-template)\nto provide a grid on a map. \n**Includes:**\n\n- Optional [header](/cars/design/create-apps/apps-for-drivers/components/header) (header is replaced with tabs when this template is embedded in the [Tab template](/cars/design/create-apps/apps-for-drivers/templates/tab-template))\n- Grid items (see the [note](#grid-note) below), each containing an icon or a large-size image\n- Primary text for each grid item (optional)\n- Secondary text for each grid item (optional)\n- Optional [floating action button](/cars/design/create-apps/apps-for-drivers/components/fab)\n\n\u003cbr /\u003e\n\n| **Note:** There is a limit on the number of grid items allowed to be shown, but the limit will not be less than 6 and may be higher in some vehicles. To retrieve the item limit for a given vehicle, use the [ConstraintManager API](https://developer.android.com/training/cars/apps#constraint-manager).\n\nGrid template examples\n----------------------\n\nThe following Android Auto and Android Automotive OS (AAOS) examples were built\nusing the Grid template.\nGrid of actions embedded in a Map + Content template Grid with enabled items and one disabled item\n\n\u003cbr /\u003e\n\nGrid template UX requirements\n-----------------------------\n\nApp developers:\n\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **SHOULD** | Limit length of primary and secondary text strings to avoid truncation. |\n| **SHOULD** | Have an action associated with each grid item (information-only items are not recommended). |\n| **SHOULD** | Clearly indicate item state (for grid items that have multiple states, such as selected and unselected) by variations in image, icon, or text. |\n| **SHOULD** | Include a header with an optional title and primary and secondary actions. |\n| **SHOULD NOT** | Include both an [action strip](/cars/design/create-apps/apps-for-drivers/components/action-strip) and a [floating action button](/cars/design/create-apps/apps-for-drivers/components/fab) at the same time. |\n| **MAY** | Show a loading spinner instead of the icon or image for a grid item when an action associated with the item is in progress. |"]]
