How to make Bottom Navigation bar in Android

Hello World, Today we are going to learn how we can make a nice bottom navigation bar in android. We will see how we can implement bottom navigation and how to work with fragments and many other things and trust me you will enjoy this tutorial. Before making our bottom navigation bar lets look at our final result. See the below gif.

This is a clean and material design based bottom navigation bar. So let’s see how to code this.

Add Bottom Navigation Bar Dependency

To make the bottom nav bar, first, we need to add the dependency for the bottom navigation bar.
Open your build.gradle file and add this dependency.

implementation 'com.google.android.material:material:1.1.0'

After adding the dependency hit the sync button and after syncing the project, we can use BottomNaigationView in our layout file.

Add BottomNavigationView in Layout

Open your layout file and in the layout XML, we need to add 2 things. The first thing is FrameLayout, which will contain our fragments and the second thing is BottomNavigationView.

See the below code.

<?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:layout_width="match_parent"
        android:layout_height="0sp"
        android:id="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottomNav"

        />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottomNav"
        app:layout_constraintTop_toBottomOf="@id/frameLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@color/colorPrimary"
        app:menu="@menu/bottom_nav_menu"
        app:itemIconTint="@color/bottom_nav_item_selector"
        app:itemTextColor="@color/bottom_nav_item_selector"
        app:labelVisibilityMode="labeled"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation:
First, we have ConstraintLayout as parent layout and then in children we have, FrameLayout and BottomNavigationView.
Nothing is fancy here except BottomNavigationView. Have you noticed the app:menu=”@menu/bottom_nav_menu”. In this line, we have created a menu for our bottom nav which we will see later. Let’s move further.

Next, we have app:itemIconTint and ;app:itemTextColor which has the same value @color/bottom_nav_item_selector. So what this property means and what is the value. These properties or attributes help us to change the nav icon color.
If you noticed the bottom nav icon color they are white in color and the active screen has solid white color and rest are having off white color. How you can customize these bottom navigation bar icons? I will tell you later in this tutorial.

Next is app:labelVisibilityMode and the value is “labeled”. This property is responsible for weather showing text below of the icons in Bottom Navigation Bar. There are other values are as follows:

• Selected
• Unlabeled
• Auto

Selected: Text will be shown only selected navigation item.

Unlabeled: Text will be hidden in navigation.

Auto: Icon text will be shown if there are 3 or less items in navigation and text will be shown only at the selected item when there are 4 or more items in navigation.

Now let’s see how to add items or menu in the bottom navigation.

How to make menu for BottomNavigationView?How to make menu for BottomNavigationView?

To make menu for the bottom navigation bar, first, we need to make a menu folder under the res folder.

To make a folder under res, right-click on res folder in android studio and then click new then click on Android Resource Directory.

Then a popup window comes and click on resource type and select menu and hit OK.

Now your menu folder is created. Now we need to make our menu resource file. To do that we need to right-click on the menu folder and click on new -> Menu Resource File.

Now we name our menu file same as in BottomNavigationView in activity layout file which is bottom_nav_menu.

See also: Gradient Status bar and Toolbar

In this file, we will add out menu item as shown below code.

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

    <item android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home"
        />

    <item android:id="@+id/trend"
        android:icon="@drawable/ic_trend"
        android:title="Trend"
        />

    <item android:id="@+id/account"
        android:icon="@drawable/ic_person"
        android:title="Account"
        />
    <item android:id="@+id/setting"
        android:icon="@drawable/ic_settings"
        android:title="Setting"
        />


</menu>

In the above code, we made 4 items for our bottom navigation. Each item has an id, an icon, and title. Simple.

Now see how we can customize the icon color of items.

How to Change Icon Color of BottomNavigationView?

To change icon color when an item is selected in the bottom navigation bar like below.

You will need to make your own color selector XML file. Follow the tutorial.

First, make color directory under the res folder. Right click on res folder and select new -> Android Resource Directory.

Hey read the full article here: Bottom Navigation Bar in Android

Thank you for reading and have a nice day.