Working with Bottom Navigation bar in Android [Full Guide]

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.

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.

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?

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.

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.

Then select resource type to color and hit enter.

After making the color directory we need to make color resource file. Right click on color folder and then new -> color resource file and name that file bottom_nav_item_selector anf hit ok.

In this file, we will write code for changing the color of icon color of items.see the below code.

In the above code, android:state_checked="true" is the item where you want to add color for a selected item and other is for non selected items.

Pass this file in app:itemIconTint and app:itemTextColor of BottomNavigationView in your layout XML.

Now let's make fragments for each item of the bottom navbar.

Make Fragments for Bottom Nav Bar

To make a fragment, just like you create a new activity in an android studio same you right-click on package folder and select new -> fragment -> fragment (blank).

We have 4 items in nav so we will make 4 fragments e.g HomeFragment, TrendFragment, AccountFragment and last SettingFragment.

After making the fragment now let's see how to change fragment on click of the items.

How to change or open fragment on Navigation Item click

To set click listener for BottomNavigationView, we have a method setOnNavigationItemSelectedListener of BottomNavigationView.

Open your MainActivity.java and add below code.

In the above code, first, we are getting our BottomNavigationView and then we are calling our openFragment method and in this method, we are changing the fragments.

First. we are opening HomeFragment on the start of the activity and then we add the setOnNavigationItemSelectedListener method to bottomNav.

in the onNavigationItemSelected, we are using switch statement and checking the clicked item id and according to that, we are opening the corresponding fragment. In the case of switch these are the ids of the menu which we created earlier.

Now run your app and your bottom navigation bar will work fine.

If you enjoy this tutorial then do share it on your facebook or maybe your WhatsApp group or even your friends and batchmates.

Thank you for reading have a nice day.

Share this Article 👇

Subscribe to our Newsletter

By subscribing to our newsletter you're agreeing with our T&C.