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