7.2 Implementation of the Bottom Navigation Bar

The bottom navigation bar is one of the most common type of navigation system in Android apps, and it's fairly simple to add. The navigation bar is generally added to an activity along with a fragment container. When the user clicks on different icons on the navigation bar, the fragments will switch.

Step 0: Importing the material design library:

To start, you'll need to add the material design library to build.gradle:

build.gradle (Module: app)

implementation 'com.google.android.material:material:1.2.1'

Step 1: Creating the Bottom Navigation Bar layout and menu

In the XML file for your activity, you can directly add the BottomNavigationView, either by typing in the XML or dragging the view from the Layout Palette:

activity_main.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Now that we have the view for the bottom navigation bar, we need a way to add the icons for the different fragments. We can do this by creating a new res directory called res/menu and adding our menu XML inside. Each item in the menu corresponds to an icon on the app.

res/menu/bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home_item"
        android:enabled="true"
        android:icon="@drawable/flower"
        android:title="Home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/favorites_item"
        android:enabled="true"
        android:icon="@drawable/flower1"
        android:title="Favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/profile_item"
        android:enabled="true"
        android:icon="@drawable/tulip"
        android:title="Profile"
        app:showAsAction="ifRoom" />
</menu>

Now inside of BottomNavigationView we need to add this line to attribute the menu xml to the navigation bar:

activity_main.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:menu="@menu/bottom_nav_menu" />

This is what the bottom navigation bar looks like:

Example of Bottom Navigation Bar

Notice how the icon that is selected is shown in a different color. By default, Android uses @color/colorPrimary as the selection color, but you can also choose to add the attribute app:itemIconTint to the navigation bar in the XML to change this.

Step 2: Adding functionality to the navigation bar

In the activity file, you can now add functionality to change fragments or modify the screen according to the selected icon. In our example, we'll just modify a TextView according to the icon selected, but this could be expanded to replace Fragments, etc:

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    bottomNavBar.setOnNavigationItemSelectedListener {
        when (it.itemId) {
            R.id.home_item -> {
                textView.text = "Home"
            }
            R.id.favorites_item -> {
                textView.text = "Favorites"
            }
            R.id.profile_item -> {
                textView.text = "Profile"
            }
        }
        true
    }
}

As you can see, building out a bottom navigation bar and customizing its functionality doesn't take a lot of code -- it's mostly layout files. This type of navigation is normally used for apps that have 3-5 different main screens or fragments. Any more or less means that you'll need to consider if the bottom navigation bar is the best way to organize all the screens.

Bonus: Implementing navigation icon badges

Android's Material Design library also allows us to add badges to the icons, which can be useful for message-based apps:

Example of badges

To implement a badge, all you need is the icon's resource id and the badge text:

MainActivity.kt

var badge = bottomNavBar.getOrCreateBadge(it.itemId)
badge.isVisible = true
badge.number = 99

For this to work, you might need to change the parent theme of the app to Theme.MaterialComponents. This is just a bug with the material design library.

[Icons used in screenshots are made by Freepik from www.flaticon.com]