Bottom Navigation Bar in Android

See bottom navigation bar is a another different section in your app’s home activity which contain certain menu items that are fragments..
Now question is what are fragments? So fragments are the that part of your activity that you dont always want to show the user until user
clicks on that fragment.So it’s also a kind of activity which are inside a activity and perform some work.

Fragments ?

Fragments are those part of your activity which are constantly in use. We kind of need to make fragments because we can show every part
of the activity in one single screen of android phone. Now to structurise it according to the small screen we kind of use different
navigations to fragments via certain buttons and use that part of the same activity. Simply if you catch the meaning of this fragment word that will clear
your doubts and let you understand most of the part of it. What does it mean by fragments? Breaking something in small pieces as per the need.
Same goes here as well. Fragments are the small pieces of the activity which are in use and why we needed to break it down? To put it into the small
android screen.

Bottom Nav Bar ?

Now, bottom nav bar. This gives you a container to store your fragments till the count 5 after that if you want to store more fragments, you need to use other tools like ‘Drawer nav bar’ and ‘Toolbar’ etc.
You use different menus to access different fragments of the activities.
So what is bottom nav bar? A container which lets you store and access your fragments. Sorry not yours, your activity’s fragments.

Implementation

Start implementation with making required activities and fragments. When you will build the project initially then you get a MainActivity.XML file. Now you have to make three fragments.

To make three fragments :

app > java > com.example.appname and right click on this package. Then go to new>fragment>fragment(Blank). And make three fragments and name it ‘HomeFragment’, ‘ProfileFragment’ and ‘SearchFragment’.

Add dependency to your gradle.build(app) file :

dependencies {
    val fragment_version = "1.5.7"
    //noinspection GradleDependency
    implementation("androidx.fragment:fragment-ktx:$fragment_version")
}

Working with MainActivity :

Add these lines to your activity_main.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"
    tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btmNavBar" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/btmNavBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_bar_menu"/>


</RelativeLayout>

Here we have added a bottom Navigation bar with these attributes :

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/btmNavBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_bar_menu"/>

Now, Here you might be getting error bellow menu attribute. That because you have not defined a menu package for your project. So we need to add menu of navigation bar.

For that we need to create another resource package that is menu

app>res right click on it and then new>Android resource directory

and make a new directory and select menu option from Resource type.

Now create menu package and make new menu file by right clicking on menu package and then name it : bottom_nav_bar_menu.

New xml file will be created and then add these lines of code to it :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/ic_home" />
    <item android:id="@+id/search"
        android:title="Search"
        android:icon="@drawable/ic_search" />
    <item android:id="@+id/profile"
        android:title="profile"
        android:icon="@drawable/ic_profile" />

</menu>

Here in icon section you have to add a vector file and add path here.

android:icon="@drawable/ic_profile" />

Now, Add these lines to your MainActivity.kt file

package com.example.bottomnavbardemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    lateinit var bottomNavigationView: BottomNavigationView
    lateinit var homeFragment: HomeFragment
    lateinit var searchFragment: SearchFragment
    lateinit var profileFragment: ProfileFragment

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

        homeFragment = HomeFragment()
        searchFragment = SearchFragment()
        profileFragment = ProfileFragment()

        bottomNavigationView = findViewById<BottomNavigationView>(R.id.btmNavBar)
        loadFragment(HomeFragment())
        bottomNavigationView.setOnItemSelectedListener {

            try {
                when (it.itemId) {
                    R.id.home -> {
                        loadFragment(homeFragment)
                        true
                    }
                    R.id.search -> {
                        loadFragment(searchFragment)
                        true
                    } else -> {
                    R.id.profile
                    loadFragment(profileFragment)
                    true
                }
                }
            } catch (e : Exception) {
                throw e
            }
        }
    }

    private fun loadFragment(fragment: Fragment) {

        if (fragment != null) {
            val transaction = supportFragmentManager.beginTransaction()
            transaction.replace(com.google.android.material.R.id.container, fragment)
            transaction.commit()
        }
    }
}

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:background="#BD8484">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="HomePage"
        android:textSize="50sp"
        android:textStyle="bold"
        android:textColor="@color/black" />

</RelativeLayout>

fragment_search.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:background="#00BCD4">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="Search Page"
        android:textSize="50sp"
        android:textStyle="bold"
        android:textColor="@color/black" />

</RelativeLayout>

fragment_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:background="#957B2E">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="Profile Page"
        android:textSize="50sp"
        android:textStyle="bold"
        android:textColor="@color/black" />

</RelativeLayout>

After adding all these lines of codes in required activity and fragments your navigation bar will be implemented.

I told your what to do so to implement BottomNavigationBar. Now lets understand what we did. You might be having some doubts till now . Letme explain every thing and show you how we did it.

Step1 : We created required activities and fragments(Nothing to explain)

Step2 : Then we added this dependency

dependencies {
    val fragment_version = "1.5.7"
    //noinspection GradleDependency
    implementation("androidx.fragment:fragment-ktx:$fragment_version")
}

This is implement all the required dependencies for setting the environment of our fragments. Basically we inject dependency to use different libraries of android. This is the same thing.

Step 3 : Added this line to activity_main.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"
    tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btmNavBar" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/btmNavBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_bar_menu"/>


</RelativeLayout>

Here I made frameLayout to say to the android to change that part only of the screen when switching to different fragments. FrameLayout is basically a layout that will change while switching to different fragments.

and then added bottomNavigationBar attributes and gave id’s to it.

Now we needed to add some menu items to our bottomNavigationBar. So for that we added this line of code to our bottom_nav_bar_menu.xml file :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/ic_home" />
    <item android:id="@+id/search"
        android:title="Search"
        android:icon="@drawable/ic_search" />
    <item android:id="@+id/profile"
        android:title="profile"
        android:icon="@drawable/ic_profile" />

</menu>

Here we made different menu items, gave name to it and id to it so that we can use them in our main acitivity to load fragments.

Step 4 : Then I designed all the fragments (Nothing to explain)

Step 5 : Working with MainActivity.kt file

I added these lines code to our MainActivity.kt file :

package com.example.bottomnavbardemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    lateinit var bottomNavigationView: BottomNavigationView
    lateinit var homeFragment: HomeFragment
    lateinit var searchFragment: SearchFragment
    lateinit var profileFragment: ProfileFragment

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

        homeFragment = HomeFragment()
        searchFragment = SearchFragment()
        profileFragment = ProfileFragment()

        bottomNavigationView = findViewById<BottomNavigationView>(R.id.btmNavBar)
        loadFragment(HomeFragment())
        bottomNavigationView.setOnItemSelectedListener {

            try {
                when (it.itemId) {
                    R.id.home -> {
                        loadFragment(homeFragment)
                        true
                    }
                    R.id.search -> {
                        loadFragment(searchFragment)
                        true
                    } else -> {
                    R.id.profile
                    loadFragment(profileFragment)
                    true
                }
                }
            } catch (e : Exception) {
                throw e
            }
        }
    }

    private fun loadFragment(fragment: Fragment) {

        if (fragment != null) {
            val transaction = supportFragmentManager.beginTransaction()
            transaction.replace(com.google.android.material.R.id.container, fragment)
            transaction.commit()
        }
    }
}

Let see one by one what are the use cases of different components of the code. This is the point to understand and also majour part of our bottomnavbar implemented here.

First we defined the variables for all the view components including our BottomNavBar and all the fragments. Why are we defining different fragments in our MainActivity? Because Fragments are also the part of MainActivity only. Then we found the views by their ID’s. We found bottomnavBar also in the MainActivity layout and then set the itemselectedClickListener on it. Why this? Because we want to select different menu items. Then we loaded our Home_fragment as our MainActivity starts. and for that we called the function loadFragment(fragment).

How this functions works :

private fun loadFragment(fragment: Fragment) {

        if (fragment != null) {
            val transaction = supportFragmentManager.beginTransaction()
            transaction.replace(com.google.android.material.R.id.container, fragment)
            transaction.commit()
        }
    }

In this function we are passing the fragment as a parameter and inside the function we made a check whether fragment is null or what. If fragment is null then we are going to use supportFragmentManager class and its method beginTransaction( ) and storing it into reference variable transaction. And then we replace that part of the frameLayout with our fragments in the second line of code. And then transaction.commit( ) commits the changes.

Then we are using when condition and switching to the fragments as per the id and as per the item selected.

That was it for this one. I explained what to do to implement BottomNavBar and then I also explained how every thing worked and how we did it.

Now you run your app and everything will be fine. Thats it for this one . See you in the next one.