Grids present items in a grid layout.
This template is useful when users rely primarily on images to make their selections.
This template can be embedded in the Tab template to provide tabbed navigation.
This template can be included in the Map + Content template to provide a grid on a map.
Includes:
- Optional header (header is replaced with tabs when this template is embedded in the Tab template)
- Grid items (see the note below), each containing an icon or a large-size image
- Primary text for each grid item (optional)
- Secondary text for each grid item (optional)
- Optional floating action button
![Wireframes of the Grid template](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/grid-template.png?authuser=9)
Grid template examples
The following Android Auto and Android Automotive OS (AAOS) examples were built using the Grid template.
![Example showing a grid of possible actions over a map](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/map_with_grid.png?authuser=9)
![Example showing settings](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/grid_example_2.png?authuser=9)
Grid template UX requirements
App developers:
SHOULD | Limit length of primary and secondary text strings to avoid truncation. |
SHOULD | Have an action associated with each grid item (information-only items are not recommended). |
SHOULD | Clearly indicate item state (for grid items that have multiple states, such as selected and unselected) by variations in image, icon, or text. |
SHOULD | Include a header with an optional title and primary and secondary actions. |
SHOULD NOT | Include both an action strip and a floating action button at the same time. |
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. |