BottomNavigationBar

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc . In this article, let’s learn how to implement such a functional Bottom Navigation Bar in the Android app. Below is the preview of a sample Bottom Navigation Bar:

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

Steps for Creating Bottom Navigation Bar

Step 1: Create a new Android Studio project

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

Step 2: Adding the dependency to the build.gradle(:app) file

We will be using Android’s Material Design Library so we need to import it in the build.gradle(:app) file . Here’s the dependency we need to add:

implementation ‘com.google.android.material:material:1.2.0’

Step 3: Working with activity_main.xml file

<?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=".MainActivity">

<FrameLayout

android:id="@+id/flFragment"

android:layout_width="match_parent"

android:layout_height="0dp"

app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id="@+id/bottomNavigationView"

android:layout_width="match_parent"

android:layout_height="75dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:menu="@menu/bottom_nav_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Creating a menu for the Bottom Navigation Bar

// bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/person"

android:title="Person"

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

<item

android:id="@+id/home"

android:title="Home"

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

<item

android:id="@+id/settings"

android:title="Settings"

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

</menu>

Step 5: Changing the Action Bar style

Since we are using Google’s Material Design Library , we need to change the action bar’s style to use the same library otherwise the Bottom Navigation Bar will be black and its items will be invisible. To change it, navigate to styles.xml by clicking on the app -> res -> values -> styles.xml and change the style opening tag as:

This is what the styles.xml file looks like:

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

Step 6: Creating Fragments to display

Now that we have our Bottom Navigation Bar, we would want it to be functional by taking us to a different fragment/activity when an item is clicked. In this example, create a fragment for each item and navigate to them whenever a corresponding item is clicked. Since we created three items in the Bottom Navigation Bar, we will be creating three Fragments. To create a Fragment, click on the app (right-click) -> New -> Fragment -> Fragment (Blank) . Name the fragment as FirstFragment and the corresponding XML file as fragment_first . To keep things simple, all three of the fragments will just contain a TextView . However, we can tweak this as we want it to be in the app. This is how the fragment_first.xml looks like after adding a TextView :

<?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=".MainActivity">

<TextView

android:id="@+id/firstFragment"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Geeks for Geeks"

android:textColor="#43a047"

android:textSize="40sp"

android:textStyle="italic|bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

Next, code the FirstFragment to display the fragment_first.xml . For this, delete all the previously written code in FirstFragment and replace it with the below code. The below code just takes the layout we created for our fragment and inflates it.

import java.io.*;

import androidx.fragment.app.Fragment

public class FirstFragment extends Fragment {

public FirstFragment(){

// require a empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_first, container, false);

}

Similarly, create two more fragments for the remaining two items.

Step 7: Working with the MainActivity file

Now we have everything that we need and lastly, we just need to code the MainActivity to connect everything to the application. Here, first, create a function called setCurrentFragment() that takes a Fragment as an argument and sets it in our FrameLayout of activity_main.xml file. Add a click listener to the items of the Bottom Navigation Bar so that we display the corresponding Fragment when an item is clicked. After adding all these codes, the MainActivity looks like this:

import android.os.Bundle;

import android.view.MenuItem;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import com.example.Fragment.*;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import java.io.*;

public class MainActivity extends AppCompatActivity

implements BottomNavigationView

.OnNavigationItemSelectedListener {

BottomNavigationView bottomNavigationView;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

bottomNavigationView

= findViewById(R.id.bottomNavigationView);

bottomNavigationView

.setOnNavigationItemSelectedListener(this);

bottomNavigationView.setSelectedItemId(R.id.person);

}

FirstFragment firstFragment = new FirstFragment();

SecondFragment secondFragment = new SecondFragment();

ThirdFragment thirdFragment = new ThirdFragment();

@Override

public boolean

onNavigationItemSelected(@NonNull MenuItem item)

{

switch (item.getItemId()) {

case R.id.person:

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.flFragment, firstFragment)

.commit();

return true;

case R.id.home:

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.flFragment, secondFragment)

.commit();

return true;

case R.id.settings:

getSupportFragmentManager()

.beginTransaction()

.replace(R.id.flFragment, thirdFragment)

.commit();

return true;

}

return false;

}