BottomNavigationView in Android

18 Feb, 2021
BottomNavigationView makes it easy for users to explore and switch between top-level views in 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. 
Some Advantages and Disadvantages of BottomNavigationView are:
It is Top-level destinations that can be accessed from anywhere in the app.
It is a Material Design Component.
Easy to use and implement.
It is used only when we have only three to five Destinations.
Can only be used with Mobile and Tablets.
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.
Add the support library in the build.gradle 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.
implementation ‘com.google.android.material:material:1.3.0-alpha03’
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.
XML
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/algorithm"        android:title="Algorithm"        android:icon="@drawable/ic_algorithm"/>    <item        android:id="@+id/course"        android:title="Course"        android:icon="@drawable/ic_course"/>    <item        android:id="@+id/profile"        android:title="Profile"        android:icon="@drawable/ic_account"/></menu>
Create an AlgorithmFragment by right click on the java package, select new -> Fragment(Blank).
Follow the above steps for CourseFragment and LoginFragment.
Now add the following code in the AlgorithmFragment.xml file. Here a TextView is added to the layout.
Below is the code for the fragment_algorithm.xml file.
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"    tools:context=".Fragments.AlgorithmFragment"    android:orientation="vertical">      <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>
Now add the following code in the CourseFragment.xml file. Here a TextView is added to the layout.
Below is the code for the fragment_course.xml file.
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"    tools:context=".Fragments.AlgorithmFragment"    android:orientation="vertical">      <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>
Now add the following code in the fragment_profile.xml file. Here a TextView is added to the layout.
Below is the code for the fragment_profile.xml file.
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"    tools:context=".Fragments.AlgorithmFragment"    android:orientation="vertical">      <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>
Now add the following code in the activity_main.xml file. In this file, we add BottomNavigationView to our layout.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">      <FrameLayout        android:id="@+id/fragment_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@id/bottom_navigation"        />      <com.google.android.material.bottomnavigation.BottomNavigationView        android:id="@+id/bottom_navigation"        android:layout_alignParentBottom="true"        android:layout_gravity="bottom"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:menu="@menu/bottom_menu"        android:background="@color/colorPrimary"        app:itemIconTint="@android:color/white"        app:itemTextColor="@android:color/white"/>  </RelativeLayout>
Now add the following code in the MainActivity.java file. 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.
Java
import androidx.annotation.NonNull;import androidx.appcompat.app.AppCompatActivity;import androidx.fragment.app.Fragment;  import android.os.Bundle;import android.view.MenuItem;  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);          BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);        bottomNav.setOnNavigationItemSelectedListener(navListener);          // as soon as the application opens the first           // fragment should be shown to the user        // in this case it is algorithm fragment        getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new AlgorithmFragment()).commit();    }      private BottomNavigationView.OnNavigationItemSelectedListener navListener = new BottomNavigationView.OnNavigationItemSelectedListener() {        @Override        public boolean onNavigationItemSelected(@NonNull MenuItem item) {            // By using switch we can easily get            // the selected fragment            // by using there id.            Fragment selectedFragment = null;            switch (item.getItemId()) {                case R.id.algorithm:                    selectedFragment = new AlgorithmFragment();                    break;                case R.id.course:                    selectedFragment = new CourseFragment();                    break;                case R.id.profile:                    selectedFragment = new ProfileFragment();                    break;            }            // It will help to replace the               // one fragment to other.            getSupportFragmentManager()                    .beginTransaction()                    .replace(R.id.fragment_container, selectedFragment)                    .commit();            return true;        }    };}
adityamshidlyali
android
Android-View
Android
Java
Kotlin
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android SDK and it's Components
How to Communicate Between Fragments in Android?
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
Object Oriented Programming (OOPs) Concept in Java
Reverse a string in Java