Material 3 Bottom App Bars

Overview

Bottom App Bars provide navigation and actions at the bottom of mobile screens.

Material 3 Bottom App Bars, using BottomAppBar, support up to four actions, including an optional Floating Action Button (FAB), navigation icon, and overflow menu. They are deprecated in favor of docked toolbars, which offer a shorter height and more flexibility. This guide covers implementation, accessibility, and theming for legacy use.

Getting Started

• Add Material Components for Android library dependency
• Use BottomAppBar with Theme.Material3.* for styling
• Prefer docked toolbars for new implementations
• Use Widget.Material3.BottomAppBar.Legacy for pre-M3 style

Accessibility

• Set android:contentDescription on bar, navigation icon, and menu items for TalkBack
• Disable hide-on-scroll when TalkBack is enabled to avoid confusion
• Ensure sufficient contrast for icons and text

Behavior and Configuration

• Configure FAB alignment (center, end) with fabAlignmentMode
• Enable hide-on-scroll with hideOnScroll
• Handle navigation and menu actions with listeners

      
val bottomAppBar = findViewById<BottomAppBar>(R.id.bottom_app_bar)
bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER)
bottomAppBar.setHideOnScroll(true)
bottomAppBar.setNavigationOnClickListener {
    // Handle navigation icon press
}
      
    

Bottom App Bar Anatomy

Component	Description	Behavior
Container	80dp height, 3dp elevation	Holds all elements, hides on scroll if enabled
Floating Action Button (FAB)	Optional, embedded or anchored, 6dp cradle margin	Center or end-aligned, animates (slide/scale)
Action Items	Up to three icons, start-aligned	Triggers actions on click
Navigation Icon	Optional, for drawer/back navigation	Triggers navigation on click
Overflow Menu	Optional, for additional actions	Expands menu on click

Bottom App Bar Example

• Supports navigation icon, up to three action items, and embedded FAB
• Deprecated; use docked toolbar for new designs

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"
        android:paddingBottom="100dp"
        android:clipToPadding="false">
        <!-- Scrollable content -->
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:contentDescription="@string/bottom_app_bar_desc"
        style="@style/Widget.Material3.BottomAppBar"
        app:navigationIcon="@drawable/ic_drawer_menu_24"
        app:menu="@menu/bottom_app_bar"
        app:hideOnScroll="true"/>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/fab_desc"
        app:srcCompat="@drawable/ic_add_24"
        app:layout_anchor="@id/bottom_app_bar"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/accelerator"
        android:icon="@drawable/ic_accelerator_24"
        android:title="@string/accelerator"
        android:contentDescription="@string/content_description_accelerator"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/rotation"
        android:icon="@drawable/ic_rotation_24"
        android:title="@string/rotation"
        android:contentDescription="@string/content_description_rotation"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/dashboard"
        android:icon="@drawable/ic_dashboard_24"
        android:title="@string/dashboard"
        android:contentDescription="@string/content_description_dashboard"
        app:showAsAction="ifRoom"/>
</menu>
      
    

      
val bottomAppBar = findViewById<BottomAppBar>(R.id.bottom_app_bar)
bottomAppBar.setNavigationOnClickListener {
    // Handle navigation icon press
}
bottomAppBar.setOnMenuItemClickListener { menuItem ->
    when (menuItem.itemId) {
        R.id.accelerator -> {
            // Handle accelerator icon press
            true
        }
        R.id.rotation -> {
            // Handle rotation icon press
            true
        }
        R.id.dashboard -> {
            // Handle dashboard icon press
            true
        }
        else -> false
    }
}
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Container	app:backgroundTint	setBackgroundTint, getBackgroundTint	?attr/colorSurfaceContainer	Sets bar background color
Container	app:elevation	setElevation	3dp	Sets bar elevation
Navigation Icon	app:navigationIcon	setNavigationIcon, getNavigationIcon	null	Sets navigation icon
Navigation Icon	app:navigationIconTint	setNavigationIconTint	?attr/colorOnSurfaceVariant	Sets navigation icon color
FAB	app:fabAlignmentMode	setFabAlignmentMode, getFabAlignmentMode	end	Sets FAB alignment (center/end)
FAB	app:fabCradleMargin	setFabCradleMargin, getFabCradleMargin	6dp	Sets FAB cradle margin
Menu	app:menu	replaceMenu, getMenu	null	Sets action menu

Theming Bottom App Bars

• Customize color, typography, and shape
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorSurfaceContainer">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="bottomAppBarStyle">@style/Widget.App.BottomAppBar</item>
    <item name="floatingActionButtonStyle">@style/Widget.App.FloatingActionButton</item>
</style>
<style name="Widget.App.BottomAppBar" parent="Widget.Material3.BottomAppBar">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomAppBar</item>
</style>
<style name="Widget.App.FloatingActionButton" parent="Widget.Material3.FloatingActionButton.Primary">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingActionButton</item>
</style>
<style name="ThemeOverlay.App.BottomAppBar" parent="ThemeOverlay.Material3.BottomAppBar">
    <item name="colorSurfaceContainer">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
<style name="ThemeOverlay.App.FloatingActionButton" parent="ThemeOverlay.Material3.FloatingActionButton.Primary">
    <item name="colorPrimaryContainer">@color/shrine_pink_50</item>
    <item name="colorOnPrimaryContainer">@color/shrine_pink_900</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Bottom App Bars
• Covers design, behavior, theming specifications
• Includes accessibility and scrolling behavior
• Refer to Material Design documentation for full details

FAQ

What is a Material 3 Bottom App Bar?

• A bottom navigation bar with actions and optional FAB, deprecated for docked toolbars

---

How many actions can it hold?

• Up to four actions, including FAB and navigation icon

---

When to use a Bottom App Bar?

• Use for legacy mobile navigation; prefer docked toolbars for new designs

---

How to make it accessible?

• Add contentDescription; disable hide-on-scroll for TalkBack

---

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; deprecated for docked toolbars