Bottom Navigation Bar in Android - GeeksforGeeks

18 Aug, 2021
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:
Why do we need a Bottom Navigation Bar?
It allows the user to switch 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:
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
For this example, create a basic app with a FrameLayout and a Bottom Navigation Bar. The  FrameLayout will contain Fragments which will change as the user click on the items in the Bottom Navigation Bar. This is how the activity_main.xml looks like:
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=".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
The Navigation Bar needs to have some items which will create using Menu. To create a Menu, first, create a Menu Directory by clicking on the app -> res(right-click) -> New -> Android Resource Directory and select Menu in the Resource Type. 
To create a Menu Resource File , click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu. 
Now the user can create as many items as he wants in the bottom_nav_menu.xml file. The user also needs to create an icon for each of these items. To create an icon, click on the app -> res -> drawable(right-click) -> New -> Image Asset.
In the window that opens, the user can name the icon whatever he wants but it should not comprise any uppercase letter. The user can select the icon he wants by searching it and when the user is done, click Next-> Finish. 
Now add these items in the bottom_nav_menu.xml. This is how the bottom_nav_menu.xml file looks like after adding the items:
XML
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <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: 
 <style name=”AppTheme” parent=”Theme.MaterialComponents.Light.DarkActionBar”>
This is how the styles.xml file looks like: 
XML
<resources>    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">        <!-- Customize your theme here. -->        <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
<?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. 
Note: If we want our fragment to have any logic or perform any task, we will add that code in our FirstFragment.
Kotlin
Java
import androidx.fragment.app.Fragment class FirstFragment:Fragment(R.layout.fragment_first) {}
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. Below are the fragment_second.xml, SecondFragment, fragment_third.xml, and ThirdFragment files respectively. 
XML
Kotlin
Java
XML
Kotlin
Java
<?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/secondFragment"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Data Structures"        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>
import androidx.fragment.app.Fragment class SecondFragment:Fragment(R.layout.fragment_second) {}
import androidx.fragment.app.Fragment;import java.io.*; public class SecondFragment extends Fragment {     public SecondFragment(){        // require a empty public constructor    }     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {         return inflater.inflate(R.layout.fragment_second, container, false);    }}
<?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/thirdFragment"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Algorithms"        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>
import androidx.fragment.app.Fragment class ThirdFragment:Fragment(R.layout.fragment_third) {}
import androidx.fragment.app.Fragment;import java.io.*; public class ThirdFragment extends Fragment {     public ThirdFragment(){        // require a empty public constructor    }     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {         return inflater.inflate(R.layout.fragment_third, container, false);    }}
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:
Kotlin
Java
import androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport androidx.fragment.app.Fragmentimport kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)         val firstFragment=FirstFragment()        val secondFragment=SecondFragment()        val thirdFragment=ThirdFragment()         setCurrentFragment(firstFragment)         bottomNavigationView.setOnNavigationItemSelectedListener {            when(it.itemId){                R.id.home->setCurrentFragment(firstFragment)                R.id.person->setCurrentFragment(secondFragment)                R.id.settings->setCurrentFragment(thirdFragment)             }            true        }     }     private fun setCurrentFragment(fragment:Fragment)=        supportFragmentManager.beginTransaction().apply {            replace(R.id.flFragment,fragment)            commit()        }     }
import java.io.*;import androidx.appcompat.app.AppCompatActivity;import androidx.annotation.NonNull;import com.example.Fragment.*;import com.google.android.material.bottomnavigation.BottomNavigationView;import android.os.Bundle;import android.view.MenuItem; 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.container, firstFragment).commit();                return true;             case R.id.home:                getSupportFragmentManager().beginTransaction().replace(R.id.container, secondFragment).commit();                return true;             case R.id.settings:                getSupportFragmentManager().beginTransaction().replace(R.id.container, thirdFragment).commit();                return true;        }        return false;    }}
Output:
iag902rf56ispfx2w5kzm0ymzv3jmvjbw9v8i0gz
Android-Bars
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Resource Raw Folder in Android Studio
Services in Android with Example
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android UI Layouts
Kotlin Array
Services in Android with Example
Android RecyclerView in Kotlin