Lost In Android Support Material Design Library: Bottom Navigation

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.

1. labeled: Will keep all labels visible.
2. unlabeled: Label will be hidden for all navigation items.
3. 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.
4. 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 setOnNavigationItemSelectedListener method to detect whether the item showing badge notification then simply removed it.

  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

• Why we need Bottom Navigation View
• Documentation on Bottom Navigation View

🎉 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…