Material 3 Navigation Bars

Overview

Navigation Bars enable switching between top-level app destinations.

Material 3 Navigation Bars, using BottomNavigationView, support up to 5 menu items with icons, labels, and badges, optimized for compact and medium window sizes. The `Material3Expressive` update introduces a shorter height and horizontal configuration for larger screens. This guide covers implementation, accessibility, badges, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use BottomNavigationView with Theme.Material3.*
• Support up to 5 menu items with icons and labels

Accessibility

• Set android:title on menu items for TalkBack
• Adjust labelVisibilityMode for label visibility
• Ensure sufficient contrast for icons and labels

Behavior and Configuration

• Handle selection with setOnItemSelectedListener
• Add badges with getOrCreateBadge
• Configure label visibility with labelVisibilityMode (AUTO, SELECTED, LABELED, UNLABELED)

      
val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigation.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.page_1 -> true
        else -> false
    }
}
val badge = bottomNavigation.getOrCreateBadge(R.id.page_1)
badge.isVisible = true
badge.number = 99
      
    

Navigation Bar Configurations

• Standard: Top-aligned icons, for compact screens
• Horizontal: Start-aligned icons, for medium screens

Standard Navigation Bar

• Top-aligned icons, ideal for mobile devices
• Supports 3-5 items with labels and badges

Example

      
<LinearLayout
    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"
    android:orientation="vertical">
    <!-- Main content -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_navigation_menu"/>
</LinearLayout>
      
    

      
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/page_1"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_24"
        android:title="@string/favorites"/>
    <item
        android:id="@+id/page_2"
        android:enabled="true"
        android:icon="@drawable/ic_music_24"
        android:title="@string/music"/>
    <item
        android:id="@+id/page_3"
        android:enabled="true"
        android:icon="@drawable/ic_places_24"
        android:title="@string/places"/>
    <item
        android:id="@+id/page_4"
        android:enabled="true"
        android:icon="@drawable/ic_news_24"
        android:title="@string/news"/>
</menu>
      
    

      
val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigation.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.page_1 -> { /* Handle favorites */ true }
        R.id.page_2 -> { /* Handle music */ true }
        R.id.page_3 -> { /* Handle places */ true }
        R.id.page_4 -> { /* Handle news */ true }
        else -> false
    }
}
val badge = bottomNavigation.getOrCreateBadge(R.id.page_2)
badge.isVisible = true
badge.number = 99
      
    

Standard Navigation Bar Anatomy

Component	Description	Behavior
Container	Holds items, 3dp elevation	colorSurfaceContainer background
Icon	24dp, top-aligned	colorOnSurfaceVariant (inactive), colorPrimary (active)
Label Text	Below icons, configurable visibility	colorOnSurfaceVariant (inactive), colorSecondary (active)
Active Indicator	56x32dp, rounded, under active item	colorSecondaryContainer, visible for active item
Small Badge	Optional, small dot	Red dot, visible if set
Large Badge	Optional, rounded with text	Red background, white text, visible if set
Large Badge Label	Number or text in large badge	Centered, capped by limits

Horizontal Navigation Bar

• Start-aligned icons, optimized for medium screens
• Expanded active indicator wraps content

Example

      
<LinearLayout
    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"
    android:orientation="vertical">
    <!-- Main content -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:itemIconGravity="start"
        app:itemGravity="center"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_navigation_menu"/>
</LinearLayout>
      
    

      
val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigation.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.page_1 -> { /* Handle favorites */ true }
        R.id.page_2 -> { /* Handle music */ true }
        R.id.page_3 -> { /* Handle places */ true }
        else -> false
    }
}
      
    

Horizontal Navigation Bar Anatomy

Component	Description	Behavior
Container	Wide layout, 3dp elevation	colorSurfaceContainer background
Icon	24dp, start-aligned	colorOnSurfaceVariant (inactive), colorPrimary (active)
Label Text	Beside icons, always visible	colorOnSurfaceVariant (inactive), colorSecondary (active)
Active Indicator	Expanded, wraps content	colorSecondaryContainer, visible for active item
Small Badge	Optional, small dot	Red dot, visible if set
Large Badge	Optional, rounded with text	Red background, white text, visible if set
Large Badge Label	Number or text in large badge	Centered, capped by limits

Adding Badges

• Add small or large badges for notifications
• Use getOrCreateBadge for badge management

      
val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)
val badge = bottomNavigation.getOrCreateBadge(R.id.page_2)
badge.isVisible = true
badge.number = 99
badge.setContentDescriptionQuantityStringsResource(R.plurals.badge_count)
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Container	app:backgroundTint	N/A	?attr/colorSurfaceContainer	Sets background color
Container	app:elevation	setElevation	3dp	Sets elevation
Navigation Item	app:menu	inflateMenu, getMenu	N/A	Sets menu resource
Navigation Item	app:labelVisibilityMode	setLabelVisibilityMode, getLabelVisibilityMode	LABEL_VISIBILITY_AUTO	Controls label visibility
Icon	app:itemIconSize	setItemIconSize, getItemIconSize	24dp	Sets icon size
Icon	app:itemIconTint	setItemIconTintList, getItemIconTintList	?attr/colorOnSurfaceVariant (inactive)	Sets icon tint
Active Indicator	android:color	setItemActiveIndicatorColor, getItemActiveIndicatorColor	?attr/colorSecondaryContainer	Sets active indicator color

Theming Navigation Bars

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

Example

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

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
</style>
<style name="Widget.App.BottomNavigationView" parent="Widget.Material3.BottomNavigationView">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
</style>
<style name="ThemeOverlay.App.BottomNavigationView" parent="">
    <item name="colorSurface">@color/shrine_theme_light_surface</item>
    <item name="colorOnSurfaceVariant">@color/shrine_theme_light_onSurfaceVariant</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Navigation Bars
• Covers design, behavior, theming specifications
• Includes accessibility, badges, and expressive updates
• Refer to Material Design documentation for full details

FAQ

What is a Material 3 Navigation Bar?

• A bar for switching between top-level app destinations

---

How many items can it hold?

• Up to 5 menu items with icons and labels

---

When to use Horizontal Navigation Bar?

• Use on medium screens like tablets for horizontal layout

---

How to make it accessible?

• Set title on menu items; adjust labelVisibilityMode

---

Can I add badges?

• Yes, use getOrCreateBadge for notifications

---

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, including expressive updates