16.2K Followers
·
Follow

Exploring the Android Design Support Library: Bottom Navigation View

Image for post
Image for post

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.

Image for post
Image for post

Adding the Bottom Navigation View to your layout

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:

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:

Image for post
Image for post

Create a menu to display

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

  • 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.
  • Next we need to

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

Image for post
Image for post

Listen for click events

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!

Check out some of my other projects at hitherejoe.com

Written by

Android Engineering Lead at Buffer, Google Developer Expert for Android & Flutter - Passionate about mobile development and learning. www.joebirch.co

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store