Floating toolbar

Usage

The floating toolbar 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)

Behavior and interaction

Configuration

• The floating toolbar emphasizes key actions and draws attention to the floating action button.
• The floating toolbar’s appearance and motion maintain clarity and hierarchy; color and elevation help the bar stand out against background surfaces, and communicate state changes.
• A single FAB represents the primary action.
• The action set should be focused, avoiding rarely used or secondary functions that clutter the interface.

Positioning

• The floating toolbar is optimized for thumb reach and ergonomic access on mobile.
• The floating toolbar should be anchored to the bottom of the screen.

Scrolling

• When scrolling, the FAB button text hides, showing only the FAB icon.

Writing guidelines

See FAB documentation for FAB label writing guidelines.

Related components

Changelog