Bottom Navigation Bar Android Tutorial For Beginners In 2020 With Example

Bottom Navigation View Android Tutorial
Share your knowledge.

Want to learn how to create bottom navigation bar in android and struggling to make it? Well this tutorial blog will help you to create a bottom navigation bar easily in minutes. 

I tried to cover most of the things about navigation bar. You can move to the section that you want to read easily via table of contents easily.

In simple words bottom navigation bar is actually like toolbar which is used to access different contents in app. During this process activity will not be changed however fragments are used to change content. It is an implementation of BottomNavigationView

2. Prerequisite For This Tutorial

In order to fallow this tutorial you must have the basic understanding about android studio at least you must made a hello world app with android studio. And since I made this tutorial by the time you read there might be quite changes in the UI of android studio. Just make sure the keywords that I am using are resembles with your UI

3. Implementing Bottom View Navigation Bar In Android

Now let us understand how to implement Bottom View Navigation Bar step by step

Step 1 : Setting Up The Project

Create a new android studio project and name it as anything you want. And if you are starting a fresh new project you can choose Bottom Navigation Activity as a launcher activity. What it does is that it will generate all code necessary for the Bottom View Navigation Bar. The wizard for selecting the activity will look something like this 

Bottom Navigation Bar In Android

After creating run the app. If you did everything correct then you must see a bottom navigation ready up and visible. Since we created it using available template android studio automatically creates us the required files and setup bottom navigation for us. Now your project should look something like in the image show here

Android studio created us 3 items for Bottom Navigation View and 4 layouts (1 activity layout and 3 fragment layouts)

Let us understand about the files that are created during this process in detail

Project Structure for Bottom Navigation

4. Understanding the Files Created During This Process​

1. activity_main.xml

As you can see our activity_main.xml  contain one BottomNavigationView and a fragment view.

2. bottom_nav_menu.xml

Another important file that is created during this process is bottom_nav_menu.xml . It contain details about the items that are present inside BottomNavigationView.

By default android studio created us 3 items if you want to add more items you can do that.

Every item will contain 3 tags properties basically those are 

  • id
  • icon
  • title

 

3. MainActivity.java

Our MainActivity does 3 things

  1. It takes reference of BottomNavigationView and store it in a variable
  2. It creates a AppBarConfiguration object and build configuration by taking the id’s of menu items
  3. And it creates a NavController object and set’s the navigation of fragments to it.

4. Other files

Android studio also created a new folder called UI and created fragments class and ViewModel classes for them. But for now let us ignore those.

5. FAQ's About BottomNavigationView

In this section let us discuss some FAQ’s related to BottomNavigationView when it comes to designing and working with it

1. How to change the color of bottom navigation view item ?

By default icon color will be set to colorPrimary if you want to change those you can change the colorPrimary color or you can set color for items like this 

  1. Create a file called my_selectors.xml in drawable (Note : You can call it anything you want)
  2. Add the following code to that file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true"
android:color="@color/colorAccent"/>
<item android:color="#000000" />

</selector>

Note :  Replace colorAccent with any color you want

  3. Now in your activity_main.xml go to BottomNavigationView and add below property

app:itemIconTint="@drawable/my_selectors"
app:itemTextColor="@drawable/my_selectors"

Note : my_selectors is the file that we created in drawable if you had named it something use that name

2. How to change the background color of the BottomNavigationView ?

You can change background of BottomNavigationView by adding this property to BottomNavigationView

android:background="@color/colorPrimary"

You can use any color you want

3. How to hide the text of inactive item in BottomNavigationView ?

You can change background of BottomNavigationView by adding this property to BottomNavigationView

android:background="@color/colorPrimary"

You can use any color you want

4. How to hide the text below items in BottomNavigationView ?

You can hide label text below items by adding this property to BottomNavigationView

app:labelVisibilityMode="unlabeled"

5. How to hide label of inactive items ? Understanding the shift mode

When you have more than 3 items android automatically adds something called ShiftMode to it. In this mode only selected item label text will be appear below it.

6. How to disable the shift mode?

If you want all labels to be appeared below the items you can do that by adding this property to BottomNavigationView

app:labelVisibilityMode="labeled"

Different values for this property will make BottomNavigation like shown in image

Bottom Navigation Android Examples

6. How to change the background of BottomNavigationView when each items clicked ?

Changing the background of the BottomNavigationView is easy you can do that by adding background property like this

android:background="@color/colorPrimary"

But we want to change background color on click of each item. You can do this by like this.

Call addOnDestinationChangedListener on navController it gives us changed destination and from that get the id of changed destination based on condition change color of that navigation view

navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
@Override
public void onDestinationChanged(@NonNull NavController controller, @NonNull NavDestination destination, @Nullable Bundle arguments) {

NavDestination currentDestination = destination;

if(currentDestination.getId()==R.id.navigation_home)
{
navView.setBackground(getDrawable(R.color.colorBlue));
}else if(currentDestination.getId()==R.id.navigation_dashboard)
{
navView.setBackground(getDrawable(R.color.colorAccent));
}else {
navView.setBackground(getDrawable(R.color.colorPurple));
}
}
});

It will look something like this

5. Design Tips For Creating A Bottom View Navigation

  • Don’t put too many items in BottomNavigationView
  • Use only 3 to 4 items. If you want to add more items consider TabLayout once
  • Don’t put large texts as labels for items. Use short words and make sure the icons resembles it’s purpose

6. Conclusion

That’s all about the bottom view navigation. Hope you enjoyed this read.If you have any questions or doubt’s feel free to ask them in the comments below and you can download the source code for this project from here

I am the guy responsible to make sure that everything that goes through this website has some value and gives some knowledge to the visitors. I have the habit of collecting quotes and I can't imagine my life without programming. I believe in self-education.
Posts created 4

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.