Ultimate Guide to Material 3 Bottom Navigation in Android XML (2025 Tutorial + Examples)

Ultimate Guide to Material 3 Bottom Navigation in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Bottom Navigation bars enable seamless switching between top-level app destinations with a single tap. This guide covers their implementation, including standard and horizontal configurations, badges, and theming for 2025. 📱

Design and API Documentation 🔗

• Google Material 3 Bottom Navigation Spec
• API Reference

Using Bottom Navigation 🤖

Add the Material Components for Android library dependency to use Material 3 Bottom Navigation. See the Get Started guide. Supports up to 5 menu items with icons and labels. Use a Theme.Material3.* theme for auto-inflation as com.google.android.material.bottomnavigation.BottomNavigationView. 🛠️

Making Bottom Navigation Accessible ♿

Set android:title on menu items for screen readers like TalkBack. Use labelVisibilityMode to control label display. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Handle item selection with OnItemSelectedListener, add badges with getOrCreateBadge, or adjust label visibility with labelVisibilityMode. Example:

      
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
      
      
    

Bottom Navigation Configurations 🌟

Material 3 Bottom Navigation supports two configurations: Standard (top-aligned icons, up to 5 items) and Horizontal (start-aligned icons for larger screens). Badges can be added for notifications. 📋

1. Standard Configuration: Top-aligned icons, ideal for mobile.
2. Horizontal Configuration: Start-aligned icons for larger screens.

Standard Bottom Navigation 🔲

Standard Bottom Navigation uses top-aligned icons, suitable for 3-5 primary destinations. 📍

Standard Bottom Navigation Example 💻

API and source code:

• BottomNavigationView
  • Class description
  • Class source

The following example shows a standard bottom navigation bar with four items.

      
bottom_navigation.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 = bottom_navigation.getOrCreateBadge(R.id.page_2)
badge.isVisible = true
badge.number = 99
      
      
    

Anatomy and Key Properties 📏

A standard bottom navigation bar has a container, icons, labels, and an active indicator. 📍

• Container: Holds items, 3dp elevation.
• Icon: 24dp, represents destinations. 🖼️
• Label: Text below icons, visibility configurable.
• Active Indicator: Highlights selected item. 🔵

Horizontal Bottom Navigation 📐

Horizontal Bottom Navigation uses start-aligned icons, optimized for larger screens like tablets. 📲

Horizontal Bottom Navigation Example 💻

The following example shows a horizontal bottom navigation bar for larger screens.

      
bottom_navigation.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
    }
}
      
      
    

Anatomy and Key Properties 📏

A horizontal bottom navigation bar aligns icons and labels horizontally. 📲

• Container: Wide layout, 3dp elevation.
• Icon: Start-aligned, 24dp. 🖼️
• Label: Beside icons, always visible.

Attributes (All Configurations) 📋

Element	Attribute	Related method(s)	Default value
Container	app:backgroundTint	N/A	?attr/colorSurfaceContainer
	app:elevation	setElevation	3dp
Navigation Item	app:menu	inflateMenu, getMenu	N/A
	app:labelVisibilityMode	setLabelVisibilityMode, getLabelVisibilityMode	LABEL_VISIBILITY_AUTO
Icon	app:itemIconSize	setItemIconSize, getItemIconSize	24dp
	app:itemIconTint	setItemIconTintList, getItemIconTintList	?attr/colorOnSurfaceVariant (inactive) (states)
Active Indicator	android:color	setItemActiveIndicatorColor, getItemActiveIndicatorColor	?attr/colorSecondaryContainer

Styles 🎨

• Default style: Widget.Material3.BottomNavigationView
• Default style theme attribute: ?attr/bottomNavigationStyle

See the full list of styles and attrs. 🔗

Theming Bottom Navigation 🖌️

Material Theming customizes bottom navigation color and typography. 🎨

Theming Example 💻

Theming example for bottom navigation:

Specific styles for bottom navigation without affecting other components:

FAQ ❓

What is Material 3 Bottom Navigation? 🤔

A bar for switching between top-level app destinations with a single tap. ✅

---

How many items can it hold? 🔢

Up to 5 menu items with icons and labels. 📋

---

When to use Horizontal Bottom Navigation? 🖋️

Use on larger screens like tablets for a horizontal layout. 📲

---

How to make it accessible? ♿

Set android:title on menu items for screen readers; adjust labelVisibilityMode. 🗣️

---

Can I add badges? 🔔

Yes, use getOrCreateBadge for icon-only or numbered badges. 📊

---

Can I customize its appearance? 🎨

Yes, theme color 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 bottom navigation. 🚀