Explore Android BottomNavigationView Tutorial with sample code

Explore the Android Design support library

For a Long time I have been using 3rd party library for the BottomNavigationView in my app but finally, the Bottom Navigation View has been added to the version 25 of the Design Support Library, something which was missing for quite a while now! But, now android has realised its importance and today, I am going to show you how you can integrate BottomNavigationView in your app within 5 minutes by following simple 5 steps.

PS: if you are a technology ethusiast and androider then check out recent announcement of Android O.

The Bottom Navigation View has been in the material design guidelines for some time, but it hasn’t been easy for developer to implement it into their apps. Some applications have built their own solutions, whilst others have relied on third-party open-source libraries to get the job done. Now the design support library is seeing the addition of this bottom navigation bar, so let’s take a dive into how we can use it!

Screen of BottomNavigationView example

You can download the sample app from the github, it’s very easy to implement and navigate between activities and fragments.

Step 1 : Add the dependencies

First update the dependancy library in your build.gradle (app) file.

Add bottomnavigationview dependency

compile ‘com.android.support:design:25.1.0’

Step 2 : Add the widget to XML Layout

We simply need to add the Bottom Navigation View widget to the XML layout file. Remember that this should be aligned with the bottom of the screen with all content displaying above it. We can add this view like so:

You’ll notice that the widget has a couple of attributes set on it. We can use these to set menu items we wish to display and the colours to be used throughout the Bottom Navigation View:

  • app:itemBackground — The background color to be used for the bottom navigation menu
  • app:itemIconTint — The tint to be used for the icons in the bottom navigation menu
  • app:itemTextColor — The color to be used for the text in the bottom navigation menu
  • app:menu — The menu resource to be used to display items in the bottom navigation menu

We can also set these values programatically by using the following methods on our BottomNavigationView instance:

  • inflateMenu(int menuResource) — Inflate a menu for the bottom navigation view using a menu resource identifier.
  • setItemBackgroundResource(int backgroundResource) — The background to be used for the menu items.
  • setItemTextColor(ColorStateList colorStateList) — A ColorStateList used to color the text used for the menu items.
  • setItemIconTintList(ColorStateList colorStateList) — A ColorStateList used to tint the icons used for the menu items.

Step 3: Create a menu to display

So we referenced a menu in the previous section, but what does this look like? Well, it looks exactly the same as any other menu that we’d use throughout our app!

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:icon
  • android:id
  • android:title

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


One of the limitation of this component So It’s important to note that the maximum number of items we can display is 5. This may change at any point, so it’s important to check this by using the getMaxItem() method provided by the BottomNavigationView class rather than hard-coding the value yourself.

Step 4: Define bottom navigation view in Java file.

First instantiate the BottomNavigationView in your java file by defining it. Then, simply just implement the setOnNavigationItemSelectedListener as displayed below. You can interact and call different Framgment or Activity (AppCompactActivity). 

For example: For an Activity simple pass an intent to switch between activities:

case R.id.action_item1:
Intent ihome = new Intent(MainActivity.this, MainHomeActivity.class);
startActivity(ihome);

Similarly For the Fragment interaction, you can do the same. check it out below.

BottomNavigationView bottomNavigationView = (BottomNavigationView)
        findViewById(R.id.navigation);
bottomNavigationView.setOnNavigationItemSelectedListener
        (new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Fragment selectedFragment = null;
                switch (item.getItemId()) {
                    case R.id.action_item1:
                        selectedFragment = ItemOneFragment.newInstance();
                        break;
                    case R.id.action_item2:
                        selectedFragment = ItemTwoFragment.newInstance();
                        break;
                    case R.id.action_item3:
                        selectedFragment = ItemThreeFragment.newInstance();
                        break;
                }
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.frame_layout, selectedFragment);
                transaction.commit();
                return true;
            }
        });

Step 5: Run it and Check it

That’s it guys, Your BottomViewNavigationViewer is up and running. Run it on your device, you’ll see a shiny new bottom navigation view like below. It works like a charm !

Testing of BottomNavigationViewer on a device
Running BottomNavigationViewer

Step 6: Handling Enabled / Disabled states

Using the BottomNavigationView we can easily handle the display of both enabled and disabled menu items. To make the view handle these cases we only simply need to make two changes:

  • First we need to create a selector file “nav_item_state_list.xml” in your drawable directory for the enabled / disabled colors. If you haven’t used one of these before, don’t worry. It’s a 30 seconds job.

Next we need to add these two lines into BottomNavigationView declaration in XML layout.

        app:itemIconTint="@color/nav_item_state_list"
        app:itemTextColor="@color/nav_item_state_list"
Now you can Disabled and Enabled states of the BottomNavigationView options. It will be reflecting the stated look and feel from the selector file:
Testing of BottomNavigationViewer on a device
Disabled and Enabled states of BottomNavigationView
Once you have updated everything, that’s it …..Hurray ! Your job done, It was this easy. You should be able to make this run in less than 5 minutes.

And that’s it! if you have followed Step 1 to 5 as I described. Your job done.

Doesn’t seem like much at all does it ?  I hope you can see now just how straight forward it is to implement the Bottom Navigation view using the design support library. A lot of apps are using the design support library already, so removing the need for third-party libraries is pretty handy If you have any questions on the Bottom Navigation View then please leave a response ! If you are still struggling with BottomNavigationView then simple download the sample and try and debug it in order to learn it easily.

Download the full source code

If you are a mac users, then you may like to check out Best Mac apps and utilities to enhance your productivity. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: