App bar - bottom

Usage

The bottom app bar in provides access to primary and frequently used actions at the bottom of the screen with configurable icon buttons, and a floating action button (FAB) for the primary task.

Reference Material Design for general guidance when designing for Android.

Design properties

Types

Icons (1)

Icons (2)

Icons (3)

Behavior and interaction

Configuration

The bottom app bar surfaces a limited set of key actions that are contextually relevant to the current screen. It contains 1-3 icon buttons and a floating action button (FAB) representing the primary task.

• The bottom app bar emphasizes key actions and draws attention to the floating action button.
• The bottom app bar’s appearance and motion maintain clarity and hierarchy; color and elevation help the bar stand out against background surfaces, and communicate state changes.
• Bottom app bar can remain persistently visible or hide and reappear upon scroll, maintaining access to frequent tasks without obstructing content.
• A single FAB represents the primary action, and is docked to the trailing edge of the screen.
• The action set should focused, avoiding rarely used or secondary functions that clutter the interface.

Positioning

The bottom app bar is optimized for thumb reach and ergonomic access on mobile.

• The bottom app bar should be anchored to the bottom of the screen, with 0px vertical and horizontal spacing. The width should be set to full-width to fill the screen horizontally.
• The FAB’s positioning behavior should be synchronized with the app bar, such as hiding during scrolling or when modal elements appear.

Writing guidelines

See FAB documentation for FAB label writing guidelines.

Related components

Changelog