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"
    app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior"
    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.

Floating toolbars can hide on scroll if inside a CoordinatorLayout by setting the following CoordinatorLayout.Behavior through the app:layout_behavior attribute:

  <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"
    app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior">
  ...
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>

This behavior will be disabled when Talkback is enabled for a11y reasons. See how to make floating toolbars accessible.

Note that the default M3 style is the horizontal standard color styling. Vibrant color or vertical styles should be explicitly set on the FloatingToolbarLayout. M3 stylings for specific components may also be defined, such as for icon buttons. These are recommended to be set explicitly on the corresponding components inside FloatingToolbarLayout. See the full list of styles.

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>

Talkback

Floating toolbars can optionally use the CoordinatorLayout.Behavior HideViewOnScrollBehavior to hide the floating toolbar on scroll. This behavior is disabled when Talkback is enabled disabled due to screen readers not being able to see it if the floating toolbar is hidden when scrolled.

If using a Floating toolbar in a layout that obscures any content when hide on scroll is disabled, make sure to add the appropriate padding to the content. For example, if the floating toolbar is on the bottom and it is obscuring the content, bottom padding should be added to the content.

See below for an example:

val am = context.getSystemService(AccessibilityManager::class.java)
if (am != null && am.isTouchExplorationEnabled) {
    (bar.layoutParams as? CoordinatorLayout.LayoutParams)?.behavior = null
    bar.post {
        content.setPadding(
            content.paddingLeft,
            content.paddingTop,
            content.paddingRight,
            content.paddingBottom + bar.measuredHeight
        )
    }
}

Anatomy and key properties

The following is an anatomy diagram for the floating toolbar:

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.