The Android Auto navigation bar provides quick access to apps, notifications, and the Assistant – plus a widget that allows multitasking with another app.
This section describes the elements of the nav bar and the variants of the nav-bar design for various screen and vehicle configurations. For details about the types of widgets that can appear in the nav bar, visit Widgets.
Anatomy
The nav bar is always visible when Android Auto is running. It appears at the bottom or side of the screen, depending on the screen dimensions and the type of controls in the vehicle.
This sample layout shows the horizontal version of the nav bar for left-hand-drive vehicles. It appears at the bottom of the screen. Other variants are shown in the next section.
Design variations
The horizontal nav bar shown in the previous section is the version typically used for left-hand-drive vehicles with standard-width screens. Other configurations of the nav bar include:
- A flipped horizontal nav bar for right-hand-drive vehicles
- A vertical nav bar for touchpad-supported or widescreen vehicles
- A vertical-nav-bar configuration with the widget appearing in a secondary space
Flipped horizontal nav bar
For right-hand drive vehicles, the arrangement of items in the nav bar is reversed: right to left instead of left to right. Reversing the order keeps the most important elements closest to the driver.
Vertical nav bar
The vertical version appears on one side of the screen and features an app icon instead of a system widget, due to space constraints in the vertical form factor. This version is used for vehicles with touchpads or wide screens. When it is used on a wide screen, the widget can appear in a secondary space, as shown in the next section.
Widget placement on wide screens
In widescreen layouts with a vertical nav bar, the system widget can appear in a secondary space on the opposite side of the screen, taking advantage of the extra real estate. In these situations, the widget has room to include extra information that wouldn’t fit in the nav-bar version, such the “Arrive at…” text in the example below.