Material 3 Docked Toolbars

Overview

Docked Toolbars display page-specific actions, typically at the bottom of the screen.

Material 3 Docked Toolbars, using DockedToolbarLayout and OverflowLinearLayout, replace the deprecated Bottom App Bar. They support hide-on-scroll behavior, overflow menus, and flexible layouts. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use DockedToolbarLayout with OverflowLinearLayout
• Apply Theme.Material3.* for styling
• Enable Material3Expressive themes for expressive styles

Accessibility

• Set android:contentDescription on actions for TalkBack
• Use accessibilityTraversalBefore/After for focus order
• Disable hide-on-scroll for TalkBack with padding adjustments

Behavior and Configuration

• Enable hide-on-scroll with HideViewOnScrollBehavior
• Use OverflowLinearLayout for overflow menus
• Handle action clicks and overflow menu interactions

      
val backButton = findViewById<Button>(R.id.docked_toolbar_back_button)
val addButton = findViewById<Button>(R.id.docked_toolbar_add_button)
backButton.setOnClickListener { /* Handle back */ }
addButton.setOnClickListener { /* Handle add */ }
val overflowLayout = findViewById<OverflowLinearLayout>(R.id.docked_toolbar_child)
overflowLayout.getOverflowedViews().forEach { view ->
    view.setOnClickListener { /* Handle overflow item click */ }
}
      
    

Expressive Update

• Replaces deprecated Bottom App Bar
• Shorter height, standard or vibrant color
• More layout flexibility with OverflowLinearLayout

Docked Toolbar Anatomy

Component	Description	Behavior
Container	DockedToolbarLayout, colorSurfaceContainer	Bottom-aligned, supports hide-on-scroll
Content	Icon buttons or custom views in OverflowLinearLayout	Triggers actions, supports overflow menu

Docked Toolbar Example

• Supports icon buttons and overflow menus
• Configurable with hide-on-scroll behavior

Example

      
<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/docked_toolbar"/>
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.dockedtoolbar.DockedToolbarLayout
        android:id="@+id/docked_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:accessibilityTraversalBefore="@id/content"
        app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior">
        <com.google.android.material.overflow.OverflowLinearLayout
            android:id="@+id/docked_toolbar_child"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal">
            <FrameLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:minWidth="48dp"
                android:layout_weight="1"
                app:layout_overflowText="@string/back"
                app:layout_overflowIcon="@drawable/ic_arrow_back_24">
                <Button
                    android:id="@+id/docked_toolbar_back_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    style="?attr/materialIconButtonStyle"
                    android:contentDescription="@string/back"
                    app:icon="@drawable/ic_arrow_back_24"/>
            </FrameLayout>
            <FrameLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:minWidth="48dp"
                android:layout_weight="1"
                app:layout_overflowText="@string/add"
                app:layout_overflowIcon="@drawable/ic_add_24">
                <Button
                    android:id="@+id/docked_toolbar_add_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    style="?attr/materialIconButtonStyle"
                    android:contentDescription="@string/add"
                    app:icon="@drawable/ic_add_24"/>
            </FrameLayout>
        </com.google.android.material.overflow.OverflowLinearLayout>
    </com.google.android.material.dockedtoolbar.DockedToolbarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val backButton = findViewById<Button>(R.id.docked_toolbar_back_button)
val addButton = findViewById<Button>(R.id.docked_toolbar_add_button)
backButton.setOnClickListener { /* Handle back */ }
addButton.setOnClickListener { /* Handle add */ }
val overflowLayout = findViewById<com.google.android.material.overflow.OverflowLinearLayout>(R.id.docked_toolbar_child)
overflowLayout.getOverflowedViews().forEach { view ->
    view.setOnClickListener { /* Handle overflow item click */ }
}
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Container	app:backgroundTint	N/A	?attr/colorSurfaceContainer	Sets toolbar background color
Container	app:shapeAppearance	N/A	0% rounded	Sets toolbar corner shape
Container	app:paddingTopSystemWindowInsets, app:paddingBottomSystemWindowInsets	N/A	Unset (auto-applied if bottom-aligned)	Sets system inset padding
Behavior	app:layout_behavior	N/A	null	Enables hide-on-scroll

Theming Docked Toolbars

• Customize color and typography
• Use res/values/styles.xml or vibrant style

Example

      
<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>
      
    

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

      
<com.google.android.material.dockedtoolbar.DockedToolbarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.App.DockedToolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior"/>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Docked Toolbars
• Covers design, behavior, theming specifications
• Includes accessibility and overflow menu support
• Refer to Material Design documentation for full details

FAQ

What is a Material 3 Docked Toolbar?

• Bottom-aligned toolbar for page-specific actions

---

How does it differ from Bottom App Bar?

• Shorter, more flexible, with overflow menus

---

When to use a Docked Toolbar?

• Use for page-specific actions with hide-on-scroll

---

How to make it accessible?

• Set content descriptions; manage focus order

---

Can I customize its appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for Docked Toolbars