Bottom navigation bar in Android with BottomNavigationView and Kotlin

Intro

In this post we will demonstrate how to create a bottom navigation bar in Android using BottomNavigationView. BottomNavigationView creates bottom navigation bars, making it easy to explore and switch between top-level content views with a single tap.

You should use bottom navigation for top level destinations that need to be accessible from anywhere in the application. It is recommended that you have three to five destinations (you can’t add more than five anyway). Bottom navigation shouldn’t be used for single tasks, like viewing a single email, user preferences or settings.

The Exercise

First we are going to create a new project in Android Studio with an empty activity that we will name HomeActivity. I will name the project Bottom navigation bar exercise with Kotlin , but you can use whatever name you find suiting. We will have to add the android material library in order to create the navigation drawer. In your app/build.gradle file add the dependency:

implementation 'com.google.android.material:material:1.2.0-alpha03'

1	implementation 'com.google.android.material:material:1.2.0-alpha03'

Next we need to create the menu items of the bottom navigation bar. In the res folder create a New Android Resource Directory:

Set the resource type to menu and press ok:

Now in the menu folder create a new Menu Resource File, i have named mine bottom_nav_menu:

Next we will create three menu items. Each item will consist of id, icon and title. The code for our menu items will look like this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home" />

    <item
        android:id="@+id/Photos"
        android:icon="@drawable/ic_photo_library_black_24dp"
        android:title="Photos" />

    <item
        android:id="@+id/more"
        android:icon="@drawable/ic_more_horiz_black_24dp"
        android:title="More" />

</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/home"

android:icon="@drawable/ic_home_black_24dp"

android:title="Home" />

<item

android:id="@+id/Photos"

android:icon="@drawable/ic_photo_library_black_24dp"

android:title="Photos" />

<item

android:id="@+id/more"

android:icon="@drawable/ic_more_horiz_black_24dp"

android:title="More" />

</menu>

To add the icons of the menu items, you need to right click the drawable folder and select New, then Vector Asset:

Then click on the Clip art icon, to select your icon:

Select the icon that will be most suitable for your menu item:

Next, to create the bottom navigation bar, in the activity_home.xml file we will remove the automatically added TextView, and add our BottomNavigationView. The code will look like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@color/colorLightGray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id="@+id/nav_view"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="0dp"

android:layout_marginEnd="0dp"

android:background="@color/colorLightGray"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

Next we need to initialize the navigation bar in HomeActivity and configure the click events on the items to show a toast message when clicked. We will create a private fun setupNavigation() where we will create an instance of the BottomNavigationView and then use the setOnNavigationItemSelectedListener to configure the click events on the items. This method will look like this:

    private fun setupNavigation() {
        val navView: BottomNavigationView = findViewById(R.id.nav_view)
        navView.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.home -> {
                    Toast.makeText(this, "Home selected", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.photos -> {
                    Toast.makeText(this, "Photos selected", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.more -> {
                    Toast.makeText(this, "More selected", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> true
            }
        }
    }