What is Bottom Navigation in Android and why should you use it?

In other words, we have to design the user interfaces so that we can make good use of the entire screen. All items in  the user interface design  should be considered, and there should be a suitable and sufficient place for all icons. In this part of the tutorial, we want to tell you about  bottom navigation for android. If you want to know how to design the user interface to make good use of the entire screen, we suggest you follow this article.

What is Bottom-Navigation?

It should be noted that Bottom-Navigation is another component of  Android system  that has many applications, and also its function is similar to the function of Tabs. Using this component, we can design a bar located at the bottom of the screen and can accommodate between three to five items.

Here are some things to look for when using Bottom-Navigation:

- Bottom Navigation is used to display important parts of  applications. For example, we can say that the  Instagram  social network application has five items and options at the bottom of the page, which are very important and are used by more users. Therefore, we knew that Bottom-Navigations are bars that can contain several options and items of great importance. In Instagram, the bottom bar contains items and options that most users use.

- It should be noted that when using Bottom-Navigation, the items and options we want to put in them must be between three to five items. Items should not be more than five or less than three. Bottom-Navigation is unlike Tabs. Tabs can contain a large number of items and options, in which case it is possible to scroll through them. If you want to put items more than five or less than three in a bar, use Tabs or Navigation Drawer and do not use Bottom-Navigation.

- If you use a text label with an icon, it is better to insert a very short text.

It should be noted that if you use Tabs for the top of the page and Bottom Navigation for the bottom of the page at the same time, you will confuse users. Therefore, their simultaneous use is not recommended.

- Be careful when determining the size of text and items. Text size and items must be equal.

- Be careful not to use different colors for items. User interfaces should be uniform and simple.

navigation android example

1- We  create a new project in Android  Studio with the desired name Bottom Navigation. (bottom navigation bar android studio)

2- For this project, we select an activity of the Empty Activity type.

3- The language to be used for this project is Java. Select it.

4- I will add the Design library to the project, as follows:

navigation android library

5- Add a BottomNavigationView to the Layout.

6- The codes that should be in the activity_main.xml section are as follows:

bottom-navigation-android

In the code above, we used the layout_alignParentBottom property to place the widget at the bottom of the page.

Use the Menu to display all items.

7- Go to res- New- Android Resource File.

8- In the path, we create a file of Menu type with the desired name bottom_navigation.xml.

9- We have to define three items in the Menu.

10- The codes that should be in the bottom_navigation.xml section are as follows:

We use the default items in Android and the path res- New- Vector Asset in the codes listed above. Each item includes a title, id, and icon.

11- Add the Menu to BottomNavigationView. Like the following:

12- We will implement the project.

13- We want to customize Bottom-Navigation.

In the codes listed above, we have used the background property, which is used to determine the component's background color. The item text color property is used to specify the text color, and the item content property is used to specify the icon.

If we change the background color, a shadow will be added to the top of the page.

14- The item Background property is also used to determine the background color of items. Like the following:

By defining and setting the item text color and itemIconTint properties, we equalize the color of the text and the icon of the items.

15- If we want to apply settings where the selected item's color is different, we must do the following.

16- Right-click on res.

17- Go to New- Android Resource File.

18- Add a Color file to the project.

19- We complete the file as follows.

20- The code that should be in the nav_color.xml section is as follows:

21- We do the following for the color property of text and icons.

22- After the project, we will see that the color of the selected items is different from the others.

23- To determine and change the color of the selected item, proceed as follows.

24- The code below also specifies the color of the unselected items.

25- It should be noted that the selected item gets its color from color primary and if we just want to change the color of the selected item, we can define a style and replace the color primary value:

26- In the next step, we have to manage the items so that we have to determine what happens with the selection of each item.

27- In the continuation of this tutorial, we will give an example that a text related to it will be displayed by selecting each item.

28- Add a TextView to the layer.

29- We need to add and define the Bottom-Navigation and TextView widgets to the activity.

30- Write the Listener method.

31- The code that should be in the MainActivity.java section is as follows:

In the code above, we use the setOnNavigationItemSelectedListener method to determine the function of the items.

32- Use the switch case to complete the method.

In the code listed above, we have defined a switch that displays the corresponding text by receiving the id of each item.

33- We need to add another item to the Menu.

After executing the project, we will see that only the selected item will be labeled if the number of items is more than three. To solve this problem, we must do the following.

34- We must disable the shift Mode feature.

35- Add a method to activity.

36- After adding it to the method, we need to call it onCreate.