BottomNavigationView in Android

BottomNavigationView makes it easy for users to explore and switch between top-level views with a single tap. There should be a minimum of 3 top-level views and a maximum of 5. If Destinations are more than 5 then use the Navigation Drawer. When the user taps on the icon it will change the top-level view accordingly. In a Music Player app to switch between Home, Album, and Radio, it can be used. Google plus app uses this widget to switch between different views. Instagram uses BottomNavigationView to switch between Feeds, Search, add, Like, and Profile. This is how a BottomNavigationView looks like.

Advantages and Disadvantages of BottomNavigationView

Advantages

It is a Top-level destination that can be accessed from anywhere in the app.
It is a Material Design Component.
Easy to use and implement.

Disadvantages

It is used only when we have only three to five Destinations.
Can only be used with Mobile and Tablets.
The length of Text Labels should be less.
It should be used when the user will spend more than 90% of the time in an app in the same window.
Using with TabLayout may cause confusion to the user.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note: The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Adding Dependency to the build.gradle.kts File

Add the support library in the build.gradle.kts (Module :app) file and add a dependency in the dependencies section. This library has the inbuilt widget for the Bottom Navigation view so through this library it can be directly added.

dependencies {
    ...
    implementation("com.google.android.material:material:1.12.0")
}

Step 3: Create a menu for Bottom Navigation Bar

Now create a new Android Resource Directory. Right-click on the res folder and select Android Resource Directory. Make sure to select the resource type as a menu. Now create the bottom_menu.xml file and add the following code. In this file, we add the title, id, and icon of our menu for BottomNavigationView. Below is the code for the bottom_menu.xml file.

bottom_menu.xml:

XML

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

    <item
        android:id="@+id/algorithm"
        android:icon="@drawable/ic_algorithm"
        android:title="Algorithm" />

    <item
        android:id="@+id/course"
        android:icon="@drawable/ic_course"
        android:title="Course" />

    <item
        android:id="@+id/profile"
        android:icon="@drawable/ic_account"
        android:title="Profile" />
</menu>

Step 4: Create 3 New Fragments

Create three new fragments with the name AlgorithmFragment, CourseFragment and ProfileFragment. Create a new fragment by right click on the package name, and selecting New > Fragment > Fragment(Blank). Now add the following code in the layout files of the fragments. Here a TextView is added to the layout.

fragment_algorithm.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".AlgorithmFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Algorithm"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

fragment_course.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".CourseFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Course"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

fragment_profile.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ProfileFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Profile"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Working with activity_main.xml

Now add the following code in the activity_main.xml file. In this file, we add BottomNavigationView to our layout.

activity_main.xml:

XML

<?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">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 6: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. In this file, we add OnNavigationItemSelectedListener which helps to navigate between the fragments. It will switch the fragment when the user taps on the icon.

MainActivity.java

package org.geeksforgeeks.demo;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Find the BottomNavigationView from the layout
        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);

        // Set the default fragment that should be shown when the app starts
        setCurrentFragment(new AlgorithmFragment());

        // Set a listener to handle item selection on the bottom navigation bar
        bottomNavigationView.setOnItemSelectedListener(menuItem -> {
            // Check which menu item was clicked
            switch (menuItem.getItemId()) {
                // If the Algorithm tab is selected, show the AlgorithmFragment
                case R.id.algorithm:
                    setCurrentFragment(new AlgorithmFragment());
                    break;
                // If the Course tab is selected, show the CourseFragment
                case R.id.course:
                    setCurrentFragment(new CourseFragment());
                    break;
                // If the Profile tab is selected, show the ProfileFragment
                case R.id.profile:
                    setCurrentFragment(new ProfileFragment());
                    break;
            }
            // Return true to indicate that we handled the item click
            return true;
        });
    }

    // This function replaces the current fragment with the one passed as a parameter
    private void setCurrentFragment(Fragment fragment) {
        getSupportFragmentManager()
            .beginTransaction()
            // Replace the fragment inside the container with the new fragment
            .replace(R.id.fragment_container, fragment)
            // Commit the transaction to actually perform the change
            .commit();
    }
}

MainActivity.kt

package org.geeksforgeeks.demo

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

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

        // Find the BottomNavigationView from the layout
        val bottomNavigationView: BottomNavigationView = findViewById(R.id.bottom_navigation)

        // Set the default fragment that should be shown when the app starts
        setCurrentFragment(AlgorithmFragment())

        // Set a listener to handle item selection on the bottom navigation bar
        bottomNavigationView.setOnItemSelectedListener { menuItem ->
            // Check which menu item was clicked
            when (menuItem.itemId) {
                // If the Algorithm tab is selected, show the AlgorithmFragment
                R.id.algorithm -> setCurrentFragment(AlgorithmFragment())
                // If the Course tab is selected, show the CourseFragment
                R.id.course -> setCurrentFragment(CourseFragment())
                // If the Profile tab is selected, show the ProfileFragment
                R.id.profile -> setCurrentFragment(ProfileFragment())
            }
            // Return true to indicate that we handled the item click
            true
        }
    }

    // This function replaces the current fragment with the one passed as a parameter
    private fun setCurrentFragment(fragment: Fragment) =
        supportFragmentManager.beginTransaction().apply {
            // Replace the fragment inside the container with the new fragment
            replace(R.id.fragment_container, fragment)
            // Commit the transaction to actually perform the change
            commit()
        }
}