Bottom Navigation Bar in Android Using Kotlin

Last Updated : 13 Dec, 2022

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, we will learn about bottom navigation using Fragments. We will learn it by making a project in android studio. Here we will be using Kotlin as the language for development.

To implement it in Java please refer to: Bottom Navigation Bar in Android using Java

Why do we need a Bottom Navigation Bar?

It allows the user to navigate to different activities/fragments easily.
It makes the user aware of the different screens available in the app.
The user is able to check which screen are they on at the moment.

The following is an anatomy diagram for the Bottom Navigation Bar:

anatomy diagram for the Bottom Navigation Bar

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to Create a new project in android studio in kotlin.

Step 2: Add a vector asset in the drawable to use as an icon for the menu

To add a vector asset go to: app > res > drawable > new( right-click) > vector asset

Step 3: Working with the nav_menu.xml file

Create a menu directory and then add a new resource file in the menu for the popup menu. To create a menu in Android Studio please refer to here. Here we need to add the item that we need to show in the menu. We need to specify there's id, icon reference, and title. Here is the code for nav_menu.xml

XML

<?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_24"
        android:title="Home"  />
    <item
        android:id="@+id/message"
        android:icon="@drawable/ic_baseline_message_24"
        android:title="Message" />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings_24"
        android:title="Setting" />
</menu>

Step 4: For each menu, we need to create a fragment. As there are 3 menus so we need to create 3 fragments. To create a fragment in Android Studio please refer to How to Create a New Fragment in Android Studio. So three of our fragments are:

Home Fragment
Menu Fragment
Settings Fragment

Here as of now for keeping it simple, We would not change anything in the fragment's Kotlin file. But to differentiate their's UI we will change the XML file.

XML file for the Home fragment:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home fragment" />

</FrameLayout>

XML file for the Chat fragment:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ChatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Message fragment" />

</FrameLayout>

XML file for the Setting fragment:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SettingFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Setting fragment" />

</FrameLayout>

Step 5: Working with the MainActivity.kt file and activity_main.xml.

this layout file will have a BottomNavigationview component in the bottom part and the top part Would be Covered By Framelayout which will be Replaced By Fragment at Runtime.

XML

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNav"
        />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/nav_menu"
        android:scrollIndicators="left"/>
</RelativeLayout>

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file.

Kotlin

package com.ayush.popupmenu

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.ImageView
import android.widget.PopupMenu
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
import java.lang.Exception

class MainActivity : AppCompatActivity() {

    lateinit var bottomNav : BottomNavigationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        loadFragment(HomeFragment())
        bottomNav = findViewById(R.id.bottomNav) as BottomNavigationView
        bottomNav.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.home -> {
                    loadFragment(HomeFragment())
                    true
                }
                R.id.message -> {
                    loadFragment(ChatFragment())
                    true
                }
                R.id.settings -> {
                    loadFragment(SettingFragment())
                    true
                }
            }
        }
    }
    private  fun loadFragment(fragment: Fragment){
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.container,fragment)
        transaction.commit()
    }

}

So, our app is ready. And we can see the output.

Output:

BottomNavigationView in Android

ayushpandey3july

Improve

Article Tags :

Bottom Navigation Bar in Android Using Kotlin

Why do we need a Bottom Navigation Bar?

Step by Step Implementation

Similar Reads

Thank You!

What kind of Experience do you want to share?