Ultimate Guide to Material 3 Top App Bars in Android XML (2025 Tutorial + Examples)
Ultimate Guide to Material 3 Top App Bars in Android: Tutorial & Examples for 2025 🚀
Overview 📖
Material 3 Top App Bars display screen-related information and actions, available in Regular (Center aligned, Small), Collapsing (Medium, Large), and Contextual variants. This guide covers their implementation, accessibility, and theming for 2025 using MaterialToolbar and related components. 📱
Design and API Documentation 🔗
Using Top App Bars 🤖
Add the Material Components for Android library dependency to use Material 3 Top App Bars. See the Get Started guide. Use MaterialToolbar within AppBarLayout and CoordinatorLayout for scrolling behaviors, or CollapsingToolbarLayout for collapsing variants, with a Theme.Material3.*.NoActionBar theme. 🛠️
Making Top App Bars Accessible ♿
Set android:contentDescription on MaterialToolbar, navigation icons, action items, and overflow menu items for TalkBack. Use app:navigationContentDescription for navigation icons and android:contentDescription in menu XML for actions. For images in collapsing bars, set descriptions on ImageViews. See the Android accessibility guide. 🗣️
Behavior and Configuration 🎬
Configure titles, navigation icons, action menus, and scrolling behaviors (e.g., lift-on-scroll, collapse). Handle interactions with setNavigationOnClickListener and setOnMenuItemClickListener. Use ActionMode for contextual action bars. Example:
val toolbar = findViewById(R.id.topAppBar)
toolbar.setNavigationOnClickListener { /* Handle navigation */ }
toolbar.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.favorite -> { /* Handle favorite */ true }
else -> false
}
}
Top App Bar Variants 🌟
Material 3 Top App Bars come in four types, grouped as Regular (Center aligned, Small) and Collapsing (Medium, Large), plus a Contextual Action Bar mode. 📱
- Regular (Center aligned/Small): Fixed, compact bar.
- Collapsing (Medium/Large): Expands/collapses with scroll.
- Contextual: Temporary action mode for selections.
Regular Top App Bar 📌
Regular Top App Bars (Small/Center aligned) provide fixed titles, navigation, and actions, suitable for most screens. 📖
Regular Top App Bar Example 💻
API and source code:
MaterialToolbarAppBarLayout
The following example shows a center-aligned small top app bar.
val toolbar = findViewById(R.id.topAppBar)
toolbar.setNavigationOnClickListener { /* Open drawer */ }
toolbar.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.favorite -> { /* Toggle favorite */ true }
R.id.more -> { /* Show more options */ true }
else -> false
}
}
Collapsing Top App Bar 📚
Collapsing Top App Bars (Medium/Large) expand for longer titles or imagery, collapsing on scroll for prominence. 📚
Collapsing Top App Bar Example 💻
The following example shows a large collapsing top app bar with an image.
val toolbar = findViewById(R.id.topAppBar)
toolbar.setNavigationOnClickListener { /* Navigate back */ }
toolbar.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.favorite -> { /* Toggle favorite */ true }
R.id.more -> { /* Show more options */ true }
else -> false
}
}
Contextual Action Bar 🛠️
Contextual Action Bars provide actions for selected items, replacing the top app bar until dismissed. 🛠️
Contextual Action Bar Example 💻
The following example shows a contextual action bar.
val callback = object : ActionMode.Callback {
override fun onCreateActionMode(mode: ActionMode?, menu: Menu?): Boolean {
menuInflater.inflate(R.menu.contextual_action_bar, menu)
mode?.title = "1 selected"
return true
}
override fun onPrepareActionMode(mode: ActionMode?, menu: Menu?): Boolean = false
override fun onActionItemClicked(mode: ActionMode?, item: MenuItem?): Boolean {
return when (item?.itemId) {
R.id.share -> { /* Share selected */ true }
R.id.delete -> { /* Delete selected */ true }
else -> false
}
}
override fun onDestroyActionMode(mode: ActionMode?) {}
}
startSupportActionMode(callback)
Anatomy and Key Properties 📏
Top app bars include a container, navigation icon, title, and action menu, with collapsing variants adding imagery or extended titles. 📱
- Container: Holds bar content, 4dp elevation.
- Navigation Icon: Optional, for navigation. 🧭
- Title: Screen identifier. ✍️
- Action Menu: Screen actions, overflow menu. 🖱️
Attributes 📋
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Container | android:background |
setBackground |
?attr/colorSurface |
| Title | app:title |
setTitle |
null |
| Navigation | app:navigationIcon |
setNavigationIcon |
null |
| Scroll Flags | app:layout_scrollFlags |
setScrollFlags |
noScroll |
Styles 🎨
- Toolbar:
Widget.Material3.Toolbar - Collapsing:
Widget.Material3.CollapsingToolbar,Medium,Large - Action Mode:
Widget.Material3.ActionMode - Default theme attributes:
?attr/toolbarStyle,?attr/collapsingToolbarLayoutStyle,?attr/actionModeStyle
See the full list of styles and attrs. 🔗
Theming Top App Bars 🖌️
Material Theming customizes top app bar colors, typography, and shapes. 🎨
Theming Example 💻
Theming example for top app bars:
Specific styles for top app bars:
FAQ ❓
What are Material 3 Top App Bars? 🤔
Bars displaying screen-related info and actions. ✅
How many variants are there? 🔢
Four types: Center aligned, Small, Medium, Large; plus Contextual. 📱
When to use Collapsing Bars? 🖋️
Use Medium/Large for longer titles or imagery. 📚
How to make them accessible? ♿
Set content descriptions for bar, icons, and menu items. 🗣️
Can I customize appearance? 🎨
Yes, theme colors and typography via res/values/styles.xml. 🖌️
How to add the Material 3 library? 📦
Include Material Components for Android. See the Get Started guide. 🛠️
Are there updates for 2025? 🗓️
This guide reflects 2025 Material 3 standards for top app bars. 🚀
Comments
Post a Comment