Android Working with Bottom Navigation

Android Bottom Navigation stays at the bottom of the screen providing navigation between top-level views in the app. This is introduced in design support library with backward compatibility. Bottom Navigation should be used when the app has three to five top level navigations.

This article explains the basics of Bottom Navigation, combing it with Fragments. We also going to learn how to load the first fragment with grid data (using RecyclerView) by fetching JSON through http call.

1. Bottom Navigation

The Bottom Navigation can be easily added using BottomNavigationView component. You have to use gravitation or relative attributes to make it appear at the bottom of the screen.

If you run the app, you can see the bottom navigation displayed as shown below.

3. Adding Fragments

As we have the Bottom Navigation ready, let’s see how to switch views when the navigation menu item is selected. This can be done easily by using the Fragments.

Note: ViewPager shouldn’t be used when using Bottom Navigation as per design specs (Avoid using lateral motion to transition between views)

I am creating four fragments named StoreFragment, GiftsFragment, CartFragment and ProfileFragment.

8. Create new Fragment by going to File ⇒ New ⇒ Fragment ⇒ Fragment (Blank) and name it as StoreFragment.java. Likewise create other three fragments too.

9. Open MainActivity.java and modify bottom navigation listener as below to load the fragments in FrameLayout.

>loadFragment() – loads the Fragment into FrameLayout. The same method is called in OnNavigationItemSelectedListener callback by passing appropriate fragment instance.> The logic needed for specific module goes into appropriate Fragment keeping the MainActivity clean.

Now if you run the project you can see the fragments loaded when navigation is selected.

4. Implementing ShopFragment – Displaying Items in Grid

Now we’ll see how to implement the first fragment i.e ShopFragment which displays the shop items in a Grid fashion. For demonstration, I have created a sample json which contains few movies for sale. To implement this, all we have to do is, fetch json and display the data in RecyclerView in a grid format. To make the task simpler, follow my other article which explains the same.

Now if you run the app, you can see the ShopFragment displaying the movies in grid manner. Likewise you can implement other fragments too.

5. Hiding Bottom Navigation on Scroll

As per design specs, the Bottom Navigation has to be hidden when the content is scrolled giving more room to content on the screen. To achieve this, we need to attach the BottomNavigationBehavior to Bottom Navigation.

17. Create a class named BottomNavigationBehavior.java with the below code.

Now if you test the app, you can see the Bottom Navigation sliding down when the app content is scrolled.

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: ravi@androidhive.info