Exploring the Android Design Support Library: Bottom Navigation View

It’s been a while since I wrote about the Android Design Support Library and I was super excited to wake up this morning to discover that the Bottom Navigation View has been added to version 25 of the Design Support Library!

The Bottom Navigation View has been in the material design guidelines for some time, but it hasn’t been easy for us to implement it into our 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, let’s take a dive into how we can use it!


I made a really simple sample app, it’s over on github if you want to check it out.


Adding the Bottom Navigation View to your layout

To begin with we need to update our dependancy!

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

Next we simply need to add the Bottom Navigation View widget to our desired 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:

https://gist.github.com/hitherejoe/e297d27023122bf7494a75c236849792

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

If you add this to your app and run it on your device, you’ll see a shiny new bottom navigation view like below:

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!

https://gist.github.com/hitherejoe/99b48f61e733d6dd397a057c791d36ab

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.


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 for our enabled / disabled colors. If you haven’t used one of these before, it essentially allows us to define the look and feel based on the state of an item.

https://gist.github.com/hitherejoe/cc0dbc84c5397ee630d0b9298112d54c

  • Next we need to

https://gist.github.com/hitherejoe/43342b2e270a39f5de548f0cef335d1b

Disabled and Enabled states will then be displayed reflecting the stated look and feel from the selector file:


Listen for click events

Now we’ve implemented our menu we need to be able to react when it’s interacted with. We can use the BottomNavigationView setOnNavigationItemSelectedListener() method to set a listener for menu item events:

https://gist.github.com/hitherejoe/20528e0b44d762cb8dc33f912038f532

When we receive click events for the items, we can simply react accordingly. In my sample I simply change the currently selected view pager item that is being displayed on the screen.


And that’s it!

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 or drop me a tweet!

Check out some of my other projects at hitherejoe.com

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s