Plan navigation tabs

  • Media apps should showcase tailored content categories like frequently used or preferred content as top-level navigation options on the app bar.

  • Developers must implement no more than 4 tabs on the app bar and provide a label and a monochrome icon for each.

  • Tab labels should be kept short to avoid truncation and maintain a consistent navigation model.

  • Content categories are browsable media items, represented with icons and labels, that are children of the root media item in the app's content hierarchy.

The first step in structuring your media app is determining which content categories you want to appear as top-level navigation options on the app bar.

Car makers and Google take care of implementing the app bar and determining most aspects of its appearance.

Basically, you need to decide the following:

  • Which top-level content categories you want represented as tabs on the app bar
  • What icons and labels you will supply for each tab

Categories should showcase tailored content, rather than broad categories that will be too large to browse easily while driving.

Tailored content might include content that is:

  • Frequently used – for example, playlists or channels
  • Preferred – for example, favorite artists
  • Timely – for example, recent songs
  • Curated – for example, “recommended for you”
Tab bar, with Home, Recents, Browse, and Your Library tabs
In this example, the tailored content includes recently-played songs, a way to discover more music, and a listing of all of the user's music.

Navigation tab requirements

Keep in mind the following requirements and recommendation:

Requirement level Requirements
MUST App developers must:
    Implement no more than 4 tabs (for AAOS)
    Provide a label and a monochrome (preferably white) vector icon for each tab (for AAOS)
SHOULD App developers should:
  • Keep tab labels as short as possible, to prevent their being truncated

Rationale

  • Simplify UX: Support a consistent navigation model for media apps.
  • Accommodate all screens: Allow car makers to use only labels when both icons and labels won’t fit.