This blog post will give a quick introduction on the new Android Bottom Navigation component, how to setup your project to use it and a few tips on how to utilise it to get the best results.
Despite being part of the Material Design recommendations for a while, Google only recently introduced this on Version 25 of Design Support Library, meaning you no longer have to create your own custom implementations.
I created a sample project on GitHub with all the source code for this article. You can check it out here later if you want.
Let’s start with a quick reminder on Google and Material Design recommendations when using the bottom navigation:
Bottom navigation should be used to provide quick navigation between top-level views of an app.
Three to five top-level destinations: this component shouldn’t be used if you have less than 3 or more than 5 options to show.
- 2 items: recommend to use a regular tab layout on the top of the page
- 5+ items: recommend to use a navigation drawer, or as an alternative you could have one of your 5 items being a More option that takes the user to a separate navigation screen
Bottom navigation and tabs: think twice if you want to use both widgets at the same time. If you really have to, take extra caution with navigation and animation to avoid confusing the user
Menu items style: this is how it works by default
- 3 items: if using 3 items all of them should have Icon and Text visible all the time
- 3+ items: if using more than 3 items only the active item should have visible text
|3 menu items||4 menu items|
We’ve covered some of the most important recommendations when using the bottom navigation widget, let’s move on to the interesting part and implement it in our app.
As with the other support library components you firstly need to add the dependency to your app Gradle file.
Now we can start using the component straight away. Here’s a quick list on what we’ll need to do:
- Add the widget to the layout file where we want to show it
- Create a menu layout file with our options
- Create a state drawable file to control the menu item different states
- Implement a listener to detect when we tap each item
Let’s add the widget as follows to the MainActivity layout file:
Remember to make it aligned at the bottom of the screen. You can check the full layout file here for reference.
As you can see, there are some properties on the widget. Let’s take a look at them in a bit more detail:
- app:itemBackground - the background colour to be used in the bottom navigation widget. In our case, this is Nodes pink
- app:itemIconTint - the tint to be used in the menu item icons
- app:itemTextColor - the colour to be used in the menu item text
- app:menu - reference to the menu layout file that we’re creating in the next step
There are no hidden tricks here, we can simply create a menu file like we would usually for any other Android menu. The menu file should have id, a reference for the drawable and the text to display.
At this stage we have created a functional bottom navigation, but we all know the importance of great UX/UI, so let’s customise this.
Right now all the icons and corresponding text are the same colour, no matter if they are selected or not.
You may have noticed that in the Widget xml definition in part 1 there was already a reference for
@drawable/menu_item_selector in the itemIconTint and itemTextColor properties.
So, we just need to create this to make everything work as expected. Create the file with the following content:
As you can see it’s a really simple selector returning 2 different colours for state checked and non-checked. Feel free to extended it to cover other states.
To complete our sample we need to listen to the tap events on each menu item. The activity layout from the sample contains a simple Frame Layout with a centered text view emulating the Fragment title.
Add this code to your Activity:
First we get references to the BottomNavigation Widget and the TextView from the layout.
Then we add the OnNavigationItemSelectedListener to the widget and use a switch to detect with menu item was tapped and update the TextView with the corresponding fragment title.
And it’s done. Super simple, right? Here’s the final result:
|3 menu items||4 menu items|
Having implemented a custom bottom navigation view myself in previous projects, I think the new Android Bottom Navigation component is a brilliant addition to the support library. As well as not having to do any boilerplate code, there are numerous benefits you get for free from this new component.
If you don’t have any specific requirements or custom UI you need to implement for bottom navigation in an app, give the new Bottom Navigation a try and you’ll see how quickly and easy it is to implement.
Take a look at some of our Android Libraries here