Floating Toolbar

Floating Toolbar provides a way to show actions related to the current page. Floating Toolbar is an undocked variant of Toolbars.

See Top App Bars and Bottom App Bars for docked Toolbar variants.

Floating toolbars can be vertical or horizontal.

Vertical Floating Toolbar	Horizontal Floating Toolbar

Contents

Design and API Documentation
Using Floating Toolbar
Theming

Design and API Documentation

Google Material3 Spec in progress
API Reference in progress

Using Floating Toolbar

Before you can use the Floating Toolbar, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Here's what a typical layout would look like:

<androidx.coordinatorlayout.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <!-- sample screen content -->
  <androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content" />
    </LinearLayout>
  </androidx.core.widget.NestedScrollView>

  <com.google.android.material.floatingtoolbar.FloatingToolbarLayout
    android:id="@+id/floating_toolbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center"
    android:layout_margin="16dp">
    
    <!-- floating toolbar sample content -->
    <LinearLayout
      android:id="@+id/floating_toolbar_child"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:orientation="vertical">

      <Button
        android:id="@+id/floating_toolbar_button_bold"
        style="?attr/materialIconButtonFilledStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkable="true"
        android:contentDescription="@string/bold_button_content_description"
        app:icon="@drawable/ic_format_bold_24px" />

      <Button
        android:id="@+id/floating_toolbar_button_italic"
        style="?attr/materialIconButtonFilledStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkable="true"
        android:contentDescription="@string/italic_button_content_description"
        app:icon="@drawable/ic_format_italic_24px" />

      <Button
        android:id="@+id/floating_toolbar_button_underlined"
        style="?attr/materialIconButtonFilledStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkable="true"
        android:contentDescription="@string/underlined_button_content_description"
        app:icon="@drawable/ic_format_underlined_24px" />
    </LinearLayout>

  </com.google.android.material.floatingtoolbar.FloatingToolbarLayout>

A Floating Toolbar is a FrameLayout that provides additional styling and functionality. You may add children to it as you would to a FrameLayout.

When inside a CoordinatorLayout, a floating toolbar will hide itself on scroll using CoordinatorLayout.Behavior.

Note that the Material3 style should be explicitly set on the FloatingToolbarLayout. See the full list of styles. Otherwise the default horizontal style will be used and android:layout_gravity and android:layout_margin will need to be set explicitly.

API and source code:

FloatingToolBar
- Class source

Making Floating Toolbar accessible

You should set a contentDescription on all the actions in the Floating Toolbar so that screen readers like TalkBack can properly announce what each action represents.

You can also control the ordering of the Talkback focus through the accessibilityTraversalBefore and accessibilityTraversalAfter flags.

For example, if you want the Floating Toolbar to gain Talkback focus first, you can set these accessibility flags like below:

  <!-- sample screen content -->
  <androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content"
        android:accessibilityTraversalAfter="@id/floating_toolbar" />
    </LinearLayout>
  </androidx.core.widget.NestedScrollView>

  <com.google.android.material.floatingtoolbar.FloatingToolbarLayout
    android:id="@+id/floating_toolbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:accessibilityTraversalBefore="@id/content">
    ...
  </com.google.android.material.floatingtoolbar.FloatingToolbarLayout>

Anatomy and key properties

The following is an anatomy diagram for the navigation rail:

Container
Content

Container attributes

Element	Attribute	Related methods	Default value
Color	`app:backgroundTint`	N/A	standard is `?attr/colorSurfaceContainer`, vibrant is `?attr/colorPrimaryContainer`
Shape	`app:shapeAppearance`	N/A	`50% rounded`
Left inset margin	`app:marginLeftSystemWindowInsets`	N/A	`true`
Top inset margin	`app:marginTopSystemWindowInsets`	N/A	`true`
Right inset margin	`app:marginRightSystemWindowInsets`	N/A	`true`
Bottom inset margin	`app:marginBottomSystemWindowInsets`	N/A	`true`

Styles

Element	Style
Standard style	`Widget.Material3.FloatingToolbar`
Vibrant style	`Widget.Material3.FloatingToolbar.Vibrant`

Standard style theme attribute: ?attr/floatingToolbarStyle Vibrant style theme attribute: ?attr/floatingToolbarVibrantStyle

Floating toolbar also provides specific styles for icon buttons, Widget.Material3.FloatingToolbar.IconButton and Widget.Material3.FloatingToolbar.IconButton.Vibrant.

See the full list of styles and floating toolbar attributes

Theming a Floating Toolbar

Floating Toolbar supports Material Theming, which can customize color and typography.