Learn2Crack

Android using BottomNavigationView

Bottom Navigation Bar is a new a UI component in Material Design for providing UI navigation. You may have seen this in the new YouTube UI. It provides easier navigation.

You can add this Bottom Navigation bar using the BottomNavigationView widget from the design support library. In this tutorial, we will create an app with Bottom Navigation Bar and Fragments displayed for each menu action.

Creating Project

Here I have created an Android Studio project with package com.learn2crack.bottomnavigationview also Activity as MainActivity and layout as activity_main.

Adding Dependencies

Make sure you have Design Support library and Constraint Layout library in your build.gradle. Latest versions of Android Studio adds these libraries on new project creation.

Creating Navigation Menu

We need to create menu file with menu items defined. Here I have created menu_navigation.xml in res->menu directory.

Creating Layout

Our main layout has a Toolbar with BottomNavigationView widget along with a FrameLayout in content_main.xml which is used to display Fragments along with menus. The BottomNavigationView widget can be customized by modifying the following properties.

Creating Activity

We have initialised BottomNavigationView widget. The OnNavigationItemSelectedListener listener interface is attached to the BottomNavigationView widget to listen for Bottom Navigation item clicks. We load the Fragment for the menu item clicks.

The Fragments are loaded using loadHomeFragment(), loadProfileFragment(), loadSettingsFragment() methods.