Bottom Navigation Bar Android Using Kotlin

Hi again, Bottom Navigation Bar is another amazing part of Android development. When you need something like simple navigation for your app, the Android Bottom Navigation Bar is one of the choices. It is very easy to implement and I will show you how. Like always, I will guide you to this awesome component by using Kotlin programming language. So, let’s do it!

What the app will look like?

The app will look like this after you finish this tutorial:

What will you learn from this tutorial?

• Understand how to implement the Bottom Navigation Bar on Android.
• Understand about the BottomNavigationView customization.

Note: In this post, I used Android Studio 3.5.3, make sure you use the latest Android Studio, or if you already install it, be sure to check the latest update. The Kotlin version that I used is Kotlin 1.3.61.

Getting Started – Bottom Navigation Bar Android

Open your Android Studio and choose to Start a new Android Studio Project. Then set the Application Name BottomNavBar and select Kotlin as the language. Give the Activity Name MainActivity and wait until the Android Studio finishes preparing your project.

Create a new XML resource file under res/menu directory named menu_bottom_navigation.xml

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

   <item android:id="@+id/menu_home"
       android:title="Home"
       android:icon="@drawable/ic_home"
       />

   <item android:id="@+id/menu_notification"
       android:title="Notification"
       android:icon="@drawable/ic_bell"
       />

   <item android:id="@+id/menu_search"
       android:title="Search"
       android:icon="@drawable/ic_search"
       />

   <item android:id="@+id/menu_profile"
       android:title="Profile"
       android:icon="@drawable/ic_profile"
       />

</menu>

This menu resource file will contain your menu items for the bottom navigation bar. For the drawable resources, you can use your own drawable files.

Next open activity_main.xml inside res/layout directory and replace the code given below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

   <TextView
       android:id="@+id/tvLabel"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:textSize="18sp"
       android:textColor="#4a4a4a"
       android:text="Home"
       />

   <com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/bottomNav"
       android:layout_width="match_parent"
       android:layout_height="58dp"
       android:layout_alignParentBottom="true"
       app:itemBackground="@android:color/white"
       app:itemIconSize="24dp"
       app:elevation="2dp"
       app:menu="@menu/menu_bottom_navigation"
       />

</RelativeLayout>

Creating a bottom navigation bar will require you to use a BottomNavigationView widget from Android. This is just a simple layout for learning purposes.

• The app:itemBackground is for setting the color for each navigation bar item.
• app:itemIconSize to set the size of navigation bar icons.
• app:menu is where you set the menu content from your XML resource you added before.

Next, open MainActivity.kt file and modify the code below:

package com.thesimplycoder.bottomnavbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       bottomNav.setOnNavigationItemSelectedListener {
           when (it.itemId) {
               R.id.menu_home -> {
                   setContent("Home")
                   true
               }
               R.id.menu_notification -> {
                   setContent("Notification")
                   true
               }
               R.id.menu_search -> {
                   setContent("Search")
                   true
               }
               R.id.menu_profile -> {
                   setContent("Profile")
                   true
               }
               else -> false
           }
       }
   }

   private fun setContent(content: String) {
       setTitle(content)
       tvLabel.text = content
   }
}

Handling the click or tap action for each navigation item requires you to implement the setOnNavigationItemSelectedListener to the bottom navbar. Each item will have specific action above but on this guide, I keep it simple to just set the label of the TextView tvLabel.

This is where the navbar looks like when you run the app: 

And this is where it looks like if only has less than three items:

Customizing the Icon and Text

What if you want a different color other than the default colorPrimary of each icon and text? It is very simple. You just create a custom selector of it. Create a new XML resource file under res/color directory named selector_nav_item.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_selected="true" android:color="@color/colorAccent" />
   <item android:color="#777"  />
</selector>

This means, when the item is selected or active, the color is colorAccent and when it is inactive or unselected, the color is kinda a semi-black color. You could use your own color though.

Next, open the activity_main.xml and modify the BottomNavigationView widget to be like this:

<com.google.android.material.bottomnavigation.BottomNavigationView
   android:id="@+id/bottomNav"
   android:layout_width="match_parent"
   android:layout_height="58dp"
   android:layout_alignParentBottom="true"
   app:itemBackground="@android:color/white"
   app:itemIconSize="24dp"
   app:elevation="2dp"
   app:menu="@menu/menu_bottom_navigation"
   app:itemIconTint="@color/selector_nav_item"
   app:itemTextColor="@color/selector_nav_item"
   />

The difference is just the addition of itemIconTint and itemTextColor. That’s it!

Where to go next?

You can download this full code from the link below:

Download final code

Be sure to check my other cool posts here about:

• Tutorial of Copy and Paste on Android
• Android Custom AlertDialog app
• Android TabLayout and ViewPager Tutorial

I hope you like my post, comment and share it with love!