Android Bottom Navigation Bar Example


Android Bottom Navigation Bar

Its been a while since Google introduced Material Design, but recently with Design Support Library v25 they released a new widget to make an Android Bottom Navigation Bar, as described in the official material design specs. This new navigation component is called the BottomNavigationView and as mentioned, its packaged under the design support library, having full backward support. Although if you browse the internet, you may find many examples, showing how to implement an Android bottom navigation bar. But this new Android BottomNavigationView widget makes it very easy for the developers to build and deploy apps with bottom navigation, as its an official component.

 

Android BottomNavigationView Widget

At first when you look at the new BottomNavigationView widget it may look similar to the TabLayout of the same library. But but do not get confused, as its implementation is a lot different than that of the later one. As the new bottom bar navigation implementation of Android is based out of menu items. Hence to populate a BottomNavigationView you need to specify a menu resource file, unlike in the TabLayout. Although if you look at the final output i.e. the screen, there is still a striking similarity between the two. But putting this discussion to rest, lets have a look at the new features of the Android BottomNavigationView.

Whenever a new component is introduced, along with it some new methods and attributes are also added with it. Hence with the Android’s official bottom navigation widget the BottomNavigationView following new XML attributes are added:

android bottom navigation bar

As I mentioned BottomNavigationView takes a menu resource file to inflate the navigation items. To do so following are the ways in which it can be done:

Once a BottomNavigationView is inflated and visible, a click listener can be attached to it:

Method used to select a specific item in the BottomNavigationView:

  • BottomNavigationView.getMenu().getItem(index).setChecked(true);

 

Although this component gives us the flexibility of changing screen content dynamically. But it is advised to not implement swiping views with an Android bottom navigation bar as per specs. Therefore this rules out the possibility of using a ViewPager with the bottom navigation bar. Instead a simple view or a set of fragments for complex implementation can be used. Therefore here in this tutorial, I will show how to implement a BottomNavigationView with a set of fragments. Lets have look at the example below.

 

Android Bottom Navigation Bar Example

To demonstrate a working example of Android BottomNavigationView widget, I would make three fragments and switch between them by using the bottom navigation bar. Here are the steps:

Step 1 : Add the dependencies

To start off with an example of bottom navigation bar on android , first we need to include following dependencies in our build.gradle file.

Step 2 : Define the Fragments

For this example I will be building a screen with three fragments, which could be switched by the BottomNavigationView. Hence before jumping on to the main screen, lets define three fragments.

Fragment 1:

 

Fragment 2:

 

Fragment 3:

 

Step 3 : Defining the bottom navigation menu XML

As mentioned before to populate the actual items into an Android bottom navigation bar, a menu type XML is used. This XML should contain at minimum three attributes:

  • android:title
  • android:icon
  • android:id

For this example of BottomNavigationView, I would make a menu of three items:

 

Step 4 : Defining the Activity XML

As you can see above, for attributes app:itemIconTint and app:itemTextColor, I have used a ColorStateList. Please make sure when you make a color state list, its according to the Material design specs for bottom navigation bar. Full source code is available at the end of the tutorial.

Step 5 : Defining the activity with bottom navigation bar

As you can see above when making a screen with the help of BottomNavigationView we have to initialize it with a default view. As there is no ViewPager here, we are doing it all manually. By default when a BottomNavigationView is initialized it is loaded with the first item selected. But if you wish to load the screen with any other item selected, you can do so by getting the menu item and setting it checked as shown above. For full source code, please refer to the following link:

Full Source Code

The final output would look like this:

Android bottom navigation bar

BottomNavigationView Limitations

Although the view itself is recently released, hence it is bound to have some issues. But if you are trying to build an Android screen with bottom navigation, here is a list of issues you might face:

  • Item Background cannot be colored for selected state.
  • It does not have a bottom navigation behavior, hence no integration is available for FAB, Snackbar, and CoordinatorLayout.
  • Ethically swiping of views should not be done – Stated in Material Design guidelines.
  • Text and icon sizes cannot be changed.
  • No way to hide title for non selected items.
  • Only 5 items can be added at a time.

 

But besides all this, building an Android bottom navigation bar has become a lot more simpler with the new BottomNavigationBar widget. As this is the new official component for bottom navigation. Also when speaking of shaping a product, giving upfront options like the bottom navigation has always gotten more traction, since it presents all the options to a user right away. Hope this helped, follow us on Twitter, Facebook and Google+ for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.


Leave a comment

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

4 thoughts on “Android Bottom Navigation Bar Example