Ultimate Guide to Material 3 Floating Toolbar in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Floating Toolbars display page-specific actions in a flexible, undocked layout, supporting horizontal or vertical orientations with hide-on-scroll and overflow menu capabilities. This guide covers their implementation, accessibility, and theming for 2025. 🛠️

Design and API Documentation 🔗

Using Floating Toolbars 🤖

Add the Material Components for Android library dependency to use Material 3 Floating Toolbars. See the Get Started guide. Use FloatingToolbarLayout with OverflowLinearLayout for dynamic action layouts in horizontal or vertical orientations. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Floating Toolbars Accessible ♿

Set android:contentDescription on actions for screen readers like TalkBack. Use accessibilityTraversalBefore/After for focus order. Disable hide-on-scroll for TalkBack with padding adjustments. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Enable hide-on-scroll with HideViewOnScrollBehavior. Use OverflowLinearLayout for overflow menus. Handle clicks on actions or overflow items. Example:

      
val boldButton = findViewById<Button>(R.id.floating_toolbar_button_bold)
boldButton.setOnClickListener { /* Handle bold */ }
val overflowLayout = findViewById<OverflowLinearLayout>(R.id.floating_toolbar_child)
overflowLayout.getOverflowedViews().forEach { it.setOnClickListener { /* Handle overflow item */ } }

Floating Toolbar Anatomy 🌟

Material 3 Floating Toolbars consist of a container and content, typically buttons or icons, with optional overflow menu support for limited space. 📋

Container: FloatingToolbarLayout, flexible positioning.
Content: Actions in OverflowLinearLayout, e.g., icon buttons. 🖱️

Floating Toolbar Example 🔲

Floating Toolbars provide undocked, flexible action layouts with hide-on-scroll and overflow capabilities, in horizontal or vertical orientations. 📋

Floating Toolbar Example 💻

API and source code:

FloatingToolbarLayout
- Class source

The following example shows a horizontal floating toolbar with two icon buttons and overflow menu support.

      
<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">
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/content"
            android:accessibilityTraversalAfter="@id/floating_toolbar"/>
    </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"
        android:accessibilityTraversalBefore="@id/content"
        app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior">
        <com.google.android.material.overflow.OverflowLinearLayout
            android:id="@+id/floating_toolbar_child"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal">
            <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"
                app:icon="@drawable/ic_format_bold_24"
                app:layout_overflowText="@string/bold"
                app:layout_overflowIcon="@drawable/ic_format_bold_24"/>
            <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"
                app:icon="@drawable/ic_format_italic_24"
                app:layout_overflowText="@string/italic"
                app:layout_overflowIcon="@drawable/ic_format_italic_24"/>
        </com.google.android.material.overflow.OverflowLinearLayout>
    </com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

      
val boldButton = findViewById<Button>(R.id.floating_toolbar_button_bold)
val italicButton = findViewById<Button>(R.id.floating_toolbar_button_italic)
boldButton.setOnClickListener { /* Handle bold */ }
italicButton.setOnClickListener { /* Handle italic */ }
val overflowLayout = findViewById<OverflowLinearLayout>(R.id.floating_toolbar_child)
overflowLayout.getOverflowedViews().forEach { view ->
    view.setOnClickListener { /* Handle overflow item click */ }
}

Anatomy and Key Properties 📏

A floating toolbar includes a container and action content. 📋

Container: FloatingToolbarLayout, rounded shape.
Content: Icon buttons or custom views in OverflowLinearLayout. 🖱️

Attributes 📋

Element	Attribute	Related method(s)	Default value
Container	`app:backgroundTint`	N/A	Standard: `?attr/colorSurfaceContainer`, Vibrant: `?attr/colorPrimaryContainer`
	`app:shapeAppearance`	N/A	50% rounded
	`app:marginBottomSystemWindowInsets`	N/A	`true`
Behavior	`app:layout_behavior`	N/A	`null`

Styles 🎨

Standard style: Widget.Material3.FloatingToolbar
Vibrant style: Widget.Material3.FloatingToolbar.Vibrant
Default style theme attribute: ?attr/floatingToolbarStyle

See the full list of styles and attrs. 🔗

Theming Floating Toolbars 🖌️

Material Theming customizes floating toolbar colors and typography. 🎨

Themed Floating Toolbar with custom colors

Theming Example 💻

Theming example for floating toolbars:

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_theme_light_primary</item>
    <item name="colorSurface">@color/shrine_theme_light_surface</item>
</style>

Specific styles for floating toolbars without affecting other components:

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="floatingToolbarStyle">@style/Widget.App.FloatingToolbar</item>
</style>

<style name="Widget.App.FloatingToolbar" parent="Widget.Material3.FloatingToolbar">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingToolbar</item>
</style>

<style name="ThemeOverlay.App.FloatingToolbar" parent="">
    <item name="colorPrimary">@color/shrine_theme_light_primary</item>
    <item name="colorSurface">@color/shrine_theme_light_surface</item>
</style>

FAQ ❓

What is a Material 3 Floating Toolbar? 🤔

An undocked toolbar for page-specific actions with overflow support. ✅

How does it differ from Docked Toolbar? 🔢

Undocked, with flexible positioning vs. fixed bottom alignment. 📋

When to use a Floating Toolbar? 🖋️

Use for actions needing flexible placement, hide-on-scroll, or overflow menus. 🛠️

How to make it accessible? ♿

Set contentDescription on actions; manage TalkBack focus order. 🗣️

Can I customize its appearance? 🎨

Yes, theme colors and typography via res/values/styles.xml. 🖌️

How to add the Material 3 library? 📦

Include the Material Components for Android library. See the Get Started guide. 🛠️

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for floating toolbars. 🚀

Search This Blog

BoltUiX

Ultimate Guide to Material 3 Floating Toolbar in Android XML (2025 Tutorial + Examples)