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

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

Overview 📖

Material 3 Navigation Rails provide ergonomic access to primary app destinations on tablet and desktop screens, supporting 3–7 icons with optional labels, headers, and badges. This guide covers their implementation, accessibility, and theming for 2025. 🚆

Design and API Documentation 🔗

• Google Material 3 Navigation Rail Spec
• API Reference

Using Navigation Rails 🤖

Add the Material Components for Android library dependency to use Material 3 Navigation Rails. See the Get Started guide. Use NavigationRailView with a menu resource for destinations. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Navigation Rails Accessible ♿

Set android:title on menu items for TalkBack to announce destinations. Use labelVisibilityMode to control label visibility. Ensure icons have sufficient contrast. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure menus via XML, add headers or badges, and handle item selection with listeners. Use expand()/collapse() for dynamic behavior. Example:

      
val navigationRail = findViewById(R.id.navigation_rail)
navigationRail.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.alarms -> { /* Handle alarms */ true }
        R.id.schedule -> { /* Handle schedule */ true }
        else -> false
    }
}
      
      
    

Navigation Rail Anatomy 🌟

Material 3 Navigation Rails consist of a container, optional header, icons, labels, and badges, designed for tablet and desktop navigation. 🚆

• Container: 80dp wide, holds content.
• Header: Optional, e.g., FAB or logo. 🖼️
• Icons/Labels: 3–7 destinations, active/inactive states. 🖱️
• Badges: Optional, show counts/status. 🔢

Navigation Rail Example 🔲

Navigation Rails offer a compact, ergonomic navigation solution for larger screens, with support for badges and expansion. 🚆

Navigation Rail Example 💻

API and source code:

• NavigationRailView
  • Class description
  • Class source

The following example shows a navigation rail with three destinations and a badge.

      
val navigationRail = findViewById(R.id.navigation_rail)
navigationRail.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.alarms -> { /* Handle alarms */ true }
        R.id.schedule -> { /* Handle schedule */ true }
        R.id.timers -> { /* Handle timers */ true }
        else -> false
    }
}
val badge = navigationRail.getOrCreateBadge(R.id.alarms)
badge.isVisible = true
badge.number = 5
      
      
    

Anatomy and Key Properties 📏

A navigation rail includes a container, optional header, icons, labels, and badges. 🚆

• Container: 80dp wide, 0dp elevation.
• Header: Optional FAB or logo. 🖼️
• Icons/Labels: Active/inactive states. 🖱️
• Badges: Dynamic info, e.g., counts. 🔢

Attributes 📋

Element	Attribute	Related method(s)	Default value
Container	app:backgroundTint	N/A	?attr/colorSurface
	app:elevation	setElevation	0dp
Header	app:headerLayout	addHeaderView	N/A
Icon	app:itemIconTint	setItemIconTintList	?attr/colorOnSecondaryContainer (active)
Label	app:itemTextColor	setItemTextColor	?attr/colorOnSurface (active)

Styles 🎨

• Default style: Widget.Material3.NavigationRailView
• Default style theme attribute: ?attr/navigationRailStyle

See the full list of styles and attrs. 🔗

Theming Navigation Rails 🖌️

Material Theming customizes navigation rail colors and typography. 🎨

Theming Example 💻

Theming example for navigation rails:

Specific styles for navigation rails without affecting other components:

FAQ ❓

What is a Material 3 Navigation Rail? 🤔

A vertical navigation bar for tablet/desktop app destinations. ✅

---

How many destinations can it hold? 🔢

Three to seven when collapsed, unlimited when expanded. 🚆

---

When to use a Navigation Rail? 🖋️

Use for primary navigation on larger screens like tablets/desktops. 🖥️

---

How to make it accessible? ♿

Set android:title for TalkBack; adjust labelVisibilityMode. 🗣️

---

Can I customize 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 navigation rails. 🚀