Tab template

The Tab template acts as a container for other templates listed below, providing tabs across the top (as shown in Anatomy of the Tab template).

The tabs allow switching among views. This capability is particularly useful for organizing content or views that users will want to browse or search.

Includes:

Each tab view corresponds to one embedded template, and only one tab view can be active at any given time.

Wireframes of Tab template

Anatomy of the Tab template

Wireframes of the Tab template, including all possible embedded templates

The Tab template consists of the following elements:

  1. Tab bar, which can show up to 4 tabs
  2. Embedded template, using one of the following templates: List, Grid, Search, Pane, Message, or Navigation

Tab template examples

Tab template with embedded List template
The "All devices" tab view is created using a Tab template that contains a List template (Android Auto example)
Tab template with embedded Grid template
The "Home devices" tab view is created using a Tab template that contains a Grid template (Android Auto example)

Tab template UX requirements

App developers:

MUST Provide monochromatic vector icons for each tab.
MUST Include at least 2 and no more than 4 tabs in the app header.
MUST NOT Allow more than 1 tab to be active at a time.
MUST NOT Create a secondary navigation by adding a second level of tabs.
SHOULD Use short tab labels to avoid truncation.
SHOULD NOT Rely on a header or action strip in embedded templates.