Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.google.android.material.bottomnavigation.BottomNavigationView
Usage
Basic usage
Apply BottomNavigation style through XML style attributes to get consistent theming for bottom navigation bars.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?bottomNavigationStyle"
app:menu="@menu/bottom_navigation_menu" />
With menu resource
Use BottomNavigationView with a menu resource to define navigation items with icons and labels.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?bottomNavigationStyle"
app:menu="@menu/bottom_navigation_menu" />
Configuration
|
Style |
Type |
Description |
|---|---|---|
|
bottomNavigationStyle |
Style reference |
Default bottom navigation style |
bottomNavigationStyle
The bottomNavigationStyle provides the default styling for BottomNavigationView with consistent background colors and item state colors.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?bottomNavigationStyle" />
Styling
Item state colors
The BottomNavigation style provides automatic color changes for navigation items based on their selection state:
- Default state: Uses default icon and text colors for unselected items
- Active state: Uses active icon and text colors for the selected item
<!-- Style automatically handles state colors -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?bottomNavigationStyle"
app:menu="@menu/navigation_items" />
Menu resource structure
Define navigation items using a menu resource with proper icons and titles:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_home"
android:title="@string/nav_home" />
<item
android:id="@+id/nav_profile"
android:icon="@drawable/ic_profile"
android:title="@string/nav_profile" />
</menu>
Design tokens
The BottomNavigation style uses design tokens for consistent theming:
- Background: Uses colorTabBarBackground semantic token for the navigation bar background
- Item icons: Active and default states use colorTabBarMenuItemActiveIcon and colorTabBarMenuItemDefaultIcon
- Item text: Active and default states use colorTabBarMenuItemActiveTitle and colorTabBarMenuItemDefaultTitle
- Layout: Inherits Material Design bottom navigation sizing and spacing
<!-- Style automatically applies design tokens -->
<com.google.android.material.bottomnavigation.BottomNavigationView
style="?bottomNavigationStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />