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

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

Overview 📖

Material 3 Navigation Drawers provide access to app destinations, appearing as permanent or temporary surfaces. This guide covers two variants—Standard (persistent) and Modal (temporary with scrim)—their implementation, accessibility, and theming for 2025. 🗂️

Design and API Documentation 🔗

• Google Material 3 Navigation Drawer Spec
• API Reference

Using Navigation Drawers 🤖

Add the Material Components for Android and AndroidX DrawerLayout library dependencies to use Navigation Drawers. See the Get Started guide. Use NavigationView for content, with DrawerLayout for Modal drawers. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Navigation Drawers Accessible ♿

Set android:contentDescription on menu items and header images for TalkBack. Ensure open/close controls meet 48dp touch targets. Menu items are auto-readable by accessibility services. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure menus via XML resources, headers via layouts, and handle item selection with listeners. Use DrawerLayout for Modal drawer open/close. Example:

      
val navigationView = findViewById(R.id.navigation_view)
navigationView.setNavigationItemSelectedListener { menuItem ->
    menuItem.isChecked = true
    drawerLayout.close()
    true
}
      
      
    

Navigation Drawer Variants 🌟

Material 3 Navigation Drawers come in two variants: Standard (persistent, for larger screens) and Modal (temporary, for mobile). Both use NavigationView for content. 🗂️

1. Standard Navigation Drawer: Always visible, coexists with content.
2. Modal Navigation Drawer: Temporary, blocks content with a scrim.

Standard Navigation Drawer 📌

Standard Navigation Drawers are permanently visible, ideal for tablets and desktops. 📌

Standard Navigation Drawer Example 💻

API and source code:

• NavigationView
  • Class description
  • Class source

The following example shows a standard navigation drawer with a header and menu.

      
val navigationView = findViewById(R.id.navigation_view)
navigationView.setNavigationItemSelectedListener { menuItem ->
    menuItem.isChecked = true
    true
}
      
      
    

Anatomy and Key Properties 📏

A standard navigation drawer is a persistent container with menu items and optional header. 📌

• Container: Permanent, holds content.
• Header: Optional, displays branding/info. ✍️
• Menu Items: Destinations with icons/text. 🖱️

Modal Navigation Drawer 📱

Modal Navigation Drawers are temporary, blocking content with a scrim, ideal for mobile devices. 📱

Modal Navigation Drawer Example 💻

The following example shows a modal navigation drawer.

      
val drawerLayout = findViewById(R.id.drawer_layout)
val navigationView = findViewById(R.id.navigation_view)
topAppBar.setNavigationOnClickListener {
    drawerLayout.open()
}
navigationView.setNavigationItemSelectedListener { menuItem ->
    menuItem.isChecked = true
    drawerLayout.close()
    true
}
      
      
    

Anatomy and Key Properties 📏

A modal navigation drawer includes a temporary container, menu items, and a scrim. 📱

• Container: Temporary, 1dp elevation.
• Menu Items: Destinations with icons/text. 🖱️
• Scrim: Dims content, 60% opacity. 🌑

Attributes (All Variants) 📋

Element	Attribute	Related method(s)	Default value
Container	android:background	setBackground	?attr/colorSurfaceContainerLow
	app:elevation	setElevation	0dp (Standard), 1dp (Modal)
Header	app:headerLayout	inflateHeaderView	null
Item Text	app:itemTextColor	setItemTextColor	?attr/colorOnSecondaryContainer (active)
Scrim	N/A	setScrimColor (DrawerLayout)	Black, 60% opacity (Modal only)

Styles 🎨

• NavigationView style: Widget.Material3.NavigationView
• DrawerLayout style: Widget.Material3.DrawerLayout
• Default style theme attribute: ?attr/navigationViewStyle, ?attr/drawerLayoutStyle

See the full list of styles and attrs. 🔗

Theming Navigation Drawers 🖌️

Material Theming customizes navigation drawer colors, typography, and shapes. 🎨

Theming Example 💻

Theming example for navigation drawers:

Specific styles for navigation drawers without affecting other components:

FAQ ❓

What are Material 3 Navigation Drawers? 🤔

Surfaces providing access to app destinations. ✅

---

How many variants are there? 🔢

Two variants: Standard and Modal. 🗂️

---

When to use a Modal Drawer? 🖋️

Use for mobile devices with limited screen space. 📱

---

How to make them accessible? ♿

Set contentDescription on items; ensure 48dp touch targets. 🗣️

---

Can I customize appearance? 🎨

Yes, theme colors, typography, and shapes via res/values/styles.xml. 🖌️

---

How to add dependencies? 📦

Include Material Components and DrawerLayout libraries. See the Get Started guide. 🛠️

---

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for navigation drawers. 🚀