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
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
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
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.
- Fragment view will act as a container for our BottomNavigationView items
- And BottomNavigationView help us to switch between the items
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
- It takes reference of BottomNavigationView and store it in a variable
- It creates a AppBarConfiguration object and build configuration by taking the id’s of menu items
- 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.
In this section let us discuss some FAQ’s related to BottomNavigationView when it comes to designing and working with it
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
- Create a file called my_selectors.xml in drawable (Note : You can call it anything you want)
- 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
You can change background of BottomNavigationView by adding this property to BottomNavigationView
android:background="@color/colorPrimary"
You can use any color you want
You can change background of BottomNavigationView by adding this property to BottomNavigationView
android:background="@color/colorPrimary"
You can use any color you want
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
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
- 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
