Ultimate Guide to Material 3 Bottom App Bars in Android XML (2025 Tutorial + Examples)
Ultimate Guide to Material 3 Bottom App Bars in Android: Tutorial & Examples for 2025 🚀
Overview 📖
Material 3 Bottom App Bars display navigation and key actions at the bottom of mobile screens, often integrating a Floating Action Button (FAB). This guide covers their implementation, customization, and theming for 2025. 📱
Design and API Documentation 🔗
Using Bottom App Bars 🤖
Add the Material Components for Android library dependency to use Material 3 Bottom App Bars. See the Get Started guide. Bottom app bars support up to four actions, including an optional FAB, navigation icon, and overflow menu. Use a Theme.Material3.* theme for auto-inflation as com.google.android.material.bottomappbar.BottomAppBar. 🛠️
Making Bottom App Bars Accessible ♿
Set android:contentDescription on the bar, navigation icon, and menu items for screen readers like TalkBack. Disable hide-on-scroll when TalkBack is enabled to avoid confusion. See the Android accessibility guide. 🗣️
Behavior and Configuration 🎬
Configure FAB alignment (center/end), hide-on-scroll, or menu actions using attributes like fabAlignmentMode or hideOnScroll. Example:
bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER)
bottomAppBar.setHideOnScroll(true)
bottomAppBar.setNavigationOnClickListener { /* Handle nav icon click */ }
Bottom App Bar Anatomy 🌟
Bottom App Bars consist of a container, optional FAB, action items, navigation icon, and overflow menu, designed for intuitive navigation and actions. 📋
- Container: Holds all elements, 80dp height.
- FAB: Optional, for primary actions. 🔘
- Action Items: Up to three icons for key actions.
- Navigation Icon: Optional, for drawer or back navigation.
- Overflow Menu: Optional, for additional actions. 📜
Bottom App Bar Example 🔲
Bottom App Bars provide navigation and actions with an optional embedded FAB, ideal for mobile screens. 📱
Bottom App Bar Example 💻
API and source code:
BottomAppBar
The following example shows a bottom app bar with a navigation icon, three action items, and an embedded FAB.
bottom_app_bar.setNavigationOnClickListener {
// Handle navigation icon press
}
bottom_app_bar.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.accelerator -> {
// Handle accelerator icon press
true
}
R.id.rotation -> {
// Handle rotation icon press
true
}
R.id.dashboard -> {
// Handle dashboard icon press
true
}
else -> false
}
}
Anatomy and Key Properties 📏
A bottom app bar includes a container, optional FAB, and action items. 📋
- Container: 80dp height, 3dp elevation. 🛠️
- FAB: Embedded or anchored, center/end aligned. 🔘
- Action Items: Up to three icons, start-aligned. 📍
Attributes 📋
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Container | app:backgroundTint |
setBackgroundTint, getBackgroundTint |
?attr/colorSurfaceContainer |
app:elevation |
setElevation |
3dp |
|
| Navigation Icon | app:navigationIcon |
setNavigationIcon, getNavigationIcon |
null |
app:navigationIconTint |
setNavigationIconTint |
?attr/colorOnSurfaceVariant |
|
| FAB | app:fabAlignmentMode |
setFabAlignmentMode, getFabAlignmentMode |
end |
app:fabCradleMargin |
setFabCradleMargin, getFabCradleMargin |
6dp |
|
| Menu | app:menu |
replaceMenu, getMenu |
null |
Styles 🎨
- Default style:
Widget.Material3.BottomAppBar - Legacy style:
Widget.Material3.BottomAppBar.Legacy - Default style theme attribute:
?attr/bottomAppBarStyle
See the full list of styles and attrs. 🔗
Theming Bottom App Bars 🖌️
Material Theming customizes bottom app bar color, typography, and shape. 🎨
Theming Example 💻
Theming example for bottom app bars:
Specific styles for bottom app bars without affecting other components:
FAQ ❓
What is a Material 3 Bottom App Bar? 🤔
A bar at the bottom of mobile screens for navigation and key actions, often with a FAB. ✅
How many actions can it hold? 🔢
Up to four actions, including a FAB, navigation icon, and menu items. 📋
When to use a Bottom App Bar? 🖋️
Use for primary navigation and actions in mobile apps, especially with a FAB. 📱
How to make it accessible? ♿
Add android:contentDescription to the bar and items; disable hide-on-scroll for TalkBack. 🗣️
Can I customize its appearance? 🎨
Yes, theme color, typography, and shape 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 app bars. 🚀
Comments
Post a Comment