Bottom Navigation in Android

There are several ways to navigate in an Android app. In my previous tutorials, I have discussed the implementation of Navigation Drawer and Tab Layouts. In this tutorial, we will see how can we implement Bottom Navigation.

Bottom navigation provides quick navigation between top-level views of an app. It is primarily designed for use on mobile. It can be used when there are three to five top-level navigations. If there are only 2 destinations, then usage of tabs is advised. When there are more than 5 destinations, then you can make use of Navigation Drawer.

Creating Project and Adding Dependencies

1. Create a new project in Android Studio with the name Bottom Navigation.

2. Add design library dependency in the build.gradle file of the app module:

Adding Bottom Navigation

3. Download drawable files and extract them to the drawable folder of your Project. It contains the icons used in the app.

4. Update the colors.xml with the following:

5. Create a new resource file named nav_item_foreground.xml  with resource type Color (Right click on res folder => New => Android resource file => Give name as nav_item_foreground and resource type as Color):

This is used for active items to have different background color than the others:

Bottom Navigation Item color

6. Update the string resource file with the following. It has a long text that is used for demonstrating scrolling behavior.

7. Create the following menu in the menu folder. This is used for rendering the Bottom Navigation:

8. Add a FrameLayout and BottomNavigationView to activity_main.xml as shown below. FrameLayout helps in containing the corresponding fragments.

9. Create a fragment class named HomeFragment and layout file fragment_home.xml.

Here I have added NestedScrollView to make the large text scrollable and to show the hiding of Bottom Navigation when the user scrolls down.

10. Create another fragment with the name DashboardFragment and layout file fragment_dashboard.xml with the following contents:

11. Similarly, create one last fragment NotificationsFragment

12. Update MainActivty with the following code. I have added a NavigationItemSelectedListener for the bottom navigation, which helps in switching between the Fragments.

Now run the application. You should be able to see the application as shown below:

Bottom Navigation Screenshot

Hiding BottomNavigationView when Scrolled

Material Design specification requires the Bottom Navigation to be dynamically hidden when scrolled down and displayed when scrolled up. To achieve this, add a helper class named ScrollHandler.

In MainActivity, set this helper as the behavior for the CoordinatorLayout LayoutParams:

Now run the application, you should be to see the Bottom Navigation being hidden when scrolled down and being shown when scrolled up.

Demonstration

Below video shows the demonstration of the app:

Source code and APK Files

You can download the Source code and APK files from the below links.

Download Source CodeDownload APK

If you have any doubts, then we can discuss them in the comments section. If you have liked this tutorial, please do follow us on Twitter and Facebook.

Stay Connected

No spam guarantee.

Abhishek

Abhishek

Abhishek loves coding. His favorite is Android Development. Apart from coding he loves traveling and reading.
Abhishek

Latest posts by Abhishek (see all)

Leave a Reply

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