Grid template

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.

Includes:

• Header with optional action strip (action strip 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 (mandatory)
• Secondary text for each grid item (optional)
• Optional floating action button

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.

Grid template examples

The following Android Auto and Android Automotive OS (AAOS) examples were built using the Grid template.

Grid in which some items have secondary text (Android Auto example)

Grid with one item’s icon temporarily replaced by a loading spinner and another item’s primary text truncated because its length exceeds the available space (AAOS example)

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 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.