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

— 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

— 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

— 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.

— 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.

— The background to be used for the menu items. setItemTextColor(ColorStateList colorStateList) — A ColorStateList used to color the text used for the menu items

— 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.