This article is the second part of the series, Lost in Android Support Material Design Library. If you didn’t read the previous one you can start from here.
Hey, Android Developer. I would like to tell you something about Android Bottom Navigation View. The Bottom Navigation View is a part of the Google Android Material Design Library. It creates a bottom navigation bar, making it easier to explore switch between with a single tap.
Let’s start with Bottom Navigation View
To begin we need to update our build.gradle file.
implementation 'com.google.android.material:material:1.2.0-alpha01'
Next, we simply need to add the BottomNavigationView
widget to our desired layout file like below:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.bottomnavigation.BottomNavigationView android:layout_gravity="bottom" app:menu="@menu/bottom_navigation_menu" android:layout_width="match_parent" android:layout_height="wrap_content"/> </FrameLayout>
You’ll notice that we have a app:menu
attribute property set to it. When implementing a BottomNavigationView the way to show icons and text is through app:menu
.
Creating app:menu to display text and Icon
In the last part of the previous section, we’ve talked about app:menu
. The item shows inside the Bottom Navigation View are added by inflating the menu file. For example, you could have a bottom_navigation_menu.xml
file inside the res->menu directory.
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:title="@string/alarm" android:id="@+id/bottomNavigationAlarmMenuId" android:icon="@drawable/alarm_vector_icon"/> <item android:title="@string/clock" android:id="@+id/bottomNavigationClockMenuId" android:icon="@drawable/clock_vector_icon"/> <item android:title="@string/timer" android:id="@+id/bottomNavigationTimerMenuId" android:icon="@drawable/timer_vector_icon"/> <item android:title="@string/stopwatch" android:id="@+id/bottomNavigationStopWatchMenuId" android:icon="@drawable/stopwatch_vector_icon"/> </menu>
Every item inside the menu tag should contain at minimum of three attributes.
- android: id A unique resource id for the menu item.
- android: title The menu title as a string resource or raw string.
- android: icon An image to used as the menu item icon. The image must be a drawable resource.
For more information about the menu, item properties check out this link.
So far if you run the application you’ll get the following result:
You can also add menu items to your Bottom Navigation View programmatically:
bottonNavigationView.inflateMenu(R.menu.bottom_navigation_menu)
Add a listener for menu items click Events
So we’ve successfully implemented our menu. Now we need to detect when navigation items have interacted.
bottomNavigationView.setOnNavigationItemSelectedListener { item: MenuItem -> [email protected] when (item.itemId) { R.id.bottomNavigationAlarmMenuId -> { toast("Alarm item click") true } R.id.bottomNavigationClockMenuId -> { toast("Clock item clicked") true } R.id.bottomNavigationTimerMenuId -> { toast("Timer item clicked") true } R.id.bottomNavigationStopWatchMenuId -> { toast("stop-watch item clicked") true } else -> false } }
On clicking the menu item we simply showing toast on screen accordingly.
Applying a material style to Bottom Navigation View
The Material Design (MD) library provides several considerable styling options. But after the recent update 1.1.0-alpha06, we can now show BadgeDrawable over the item icon in the top right corner. We’ll see how to add BadgeDrawbale at the end of this article. Now let’s look at all possible styling options.
Change look of text and icon
At the most basic level, what if we need to change the icon and text color of menu items. I’m pretty sure most of us want to override the default styling behavior of Bottom Navigation View. The easiest way to do it by adding the itemIconTint
and itemTextColor
property attribute inside the com.google.*******.BottomNavigationView
xml tag.
<com.google.android.material.bottomnavigation.BottomNavigationView android:layout_gravity="bottom" app:menu="@menu/bottom_navigation_menu" app:itemIconTint="@color/colorRed" app:itemTextColor="@color/colorLigthGreen" android:id="@+id/bottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content"/>
With such basic styling, you can expect your Bottom Navigation View look like this:

The above demo looks fine but there’s not state showing for which item is enabled or which is disabled. Mostly, the disabled states show a different color than the enabled one. With that the way we need to create a new drawable file inside the res-> drawable directory for enabled/disabled state.
For example, we could have a bottom_navigation_item_colors.xml
file that contains:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/colorLightRed"/> <item android:state_checked="false" android:color="@color/colorSecondaryText"/> </selector>
Next, update the itemIconTint
property attribute.
<com.google.android.material.bottomnavigation.BottomNavigationView ...... ..... app:itemIconTint="@drawable/bottom_navigation_item_colors" app:itemTextColor="@color/colorGreen"/>
Finally, run the application to view the progress so far.
Color ripple Effects
The color of navigation item touch ripple can be customized with itemRippleColor
attribute.
<com.google.android.material.bottomnavigation.BottomNavigationView ....... app:itemRippleColor="@color/colorLightRed" android:layout_width="match_parent" android:layout_height="wrap_content"/>
After the above change, we’ll see the light red color ripple effect when the user presses the menu items.
Text Labeling
The labelVisibilityMode
attribute can be used to show the text labels on each navigation item. Now if you look at the above examples of Bottom Navigation you’ll notice that the label only shows when the item is selected. Well, that is because, if we did not set any labelVisibilityMode
the default label auto will be used. There are four types of labelVisibilityMode
added inside the Android Material Design library for Bottom Navigation View.
- labeled: Will keep all labels visible.
- unlabeled: Label will be hidden for all navigation items.
- auto(default): It used an item count to determine whether to show or hide the label. If the navigation item count is 3 the mode will behave as labeled, 4 or more the behavior will be selected.
- selected: Will only show the label for the selected item.
When to use which labelVisibilityMode
From the Material Design here are a couple of guidelines when to use which labelVisibilityMode
.
- 3 items: Use labeled visibility mode to show icons and text for all navigation items.
- 4-5 items: Use selected visibility mode to display icon and text on the selected navigation item. Inactive items only show icons.
Working with BadgeDrawable (Notification Badge)
The Bottom Navigation View items can include badges in their right upper corner as a notification. The badges contain dynamic information such as a number of pending requests and a colorful dot. Without further ado let’s create a badge notification on navigation item.
Show notification Badge
val badgeDrawable : BadgeDrawable = bottomNavigationView.showBadge(R.id.bottomNavigationClockMenuId) // menu item id
The showBadge method returns an instance of BadgeDrawable. Visually what we’ll find is after adding the badge notification to clock menu item is below.
You see there a slight red dot icon appearing at the right side of the clock menu icon. A badge displayed without a number is the default behavior. Now let’s say I want to show a notification count 1, for the clock menu item. The BadgeDrawable class exposes the convenience method to add notification count via the setNumber method.
myBottomNav.showBadge(R.id.bottomNavigationClockMenuId).apply { number = 1 }
With the above change in code, you’ll get the following result.
Remove notification Badge
Notification must be removed or dismissed once we tap on the item. We can do this by the
myBottomNav.setOnNavigationItemSelectedListener { item: MenuItem -> val itemId = item.itemId myBottomNav.getBadge(itemId)?.let { badgeDrawable -> if (badgeDrawable.isVisible) // check whether the item showing badge myBottomNav.removeBadge(itemId) // remove badge notification } [email protected] true }
Here’s the demo.
More Resources
🎉 Hurrah!!! Thus, we have successfully implemented and demonstrated the use of Android Bottom Navigation View. If you have any questions, suggestions and want any help you can add comments at the end of this article. If you like the post don’t forget to hit the below ♥️ button.
Thank you for being and here and keep reading…
15 Comments
Hi, I’m having trouble with “Add listener for menu items click Events”, could you please specify where I put that bit of code? Or supply the Studio Code folder for this example? Thanks!
Hey Marcus,
You can create a gist file in the GitHub and send me the link I’ll definitely look into it.
Great article that helps me a lot!!! THANK YOU~
Hey Meng,
Glad you like the article.
Thanks for your blog, it’s extremly helpful for me
Hey Tai,
I’m glad it helps!
Hi!Thank you for your blog.
I’m having trouble with “Add listener for menu items click Events”.
I got the error message like blow.
“unresolved reference: bottomNavigationView”
How can i fix this ?
This is my Github link “https://github.com/TAIniko/AndroidMaterialSumple”
Hey Taisuke,
I just made some changes in your GitHub project with some commenting please accept now it is working.
It’s working!
Thank you very much !!
still getting the unresolved error message for bottomNavigationView
Hey Nav,
I’m unable to track down what’s your problem can you please upload your project on Github so that I can verify what’s the problem.
how can I change the text to the right side instead of appearing in the bottom side
Thanks.
https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView
BottomNavigationView doesn’t seem to have a method ‘showBadge’, while the material guidelines actually show it:
https://ahsensaeed.com/bottom-navigation-view-android-example/
How do I access it?
I’m currently using:
implementation “com.google.android.material:material:1.3.0-alpha01”
but even older versions don’t have it
Hey Derp,
It seems like the MaterialDesign library updated the showBadge method to “getOrCreateBadge()”.
val badgeDrawable = bottomNav.getOrCreateBadge(R.id.home_menu_item_id)