Explore the Android Design support library

For a Long time I have been using 3rd party library for the BottomNavigationView in my app but finally, the Bottom Navigation View has been added to the version 25 of the Design Support Library, something which was missing for quite a while now! But, now android has realised its importance and today, I am going to show you how you can integrate BottomNavigationView in your app within 5 minutes by following simple 5 steps.

PS: if you are a technology ethusiast and androider then check out recent announcement ofAndroid O.

The Bottom Navigation View has been in thematerial design guidelinesfor some time, but it hasn’t been easy for developer to implement it into their 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, so let’s take a dive into how we can use it!

Step 1 : Add the dependencies

First update the dependancy library in your build.gradle (app) file.

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

Step 2 : Add the widget to XML Layout

We simply need to add the Bottom Navigation View widget to the XML 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.

Step 3: 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!

As mentioned before to populate the actual items into an Android bottom navigation bar, a menu type XML is used. This XML should contain at minimum three attributes:

android:icon

android:id

android:title

For this example of BottomNavigationView, I would make a menu of three items:

One of the limitation of this component So 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.

Step 4: Define bottom navigation view in Java file.

First instantiate the BottomNavigationView in your java file by defining it. Then, simply just implement the setOnNavigationItemSelectedListener as displayed below. You can interact and call different Framgment or Activity (AppCompactActivity).

For example: For an Activity simple pass an intent to switch between activities:

Step 5: Run it and Check it

That’s it guys, Your BottomViewNavigationViewer is up and running. Run it on your device, you’ll see a shiny new bottom navigation view like below. It works like a charm !

Running BottomNavigationViewer

Step 6: 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 “nav_item_state_list.xml” in your drawable directory for the enabled / disabled colors. If you haven’t used one of these before, don’t worry. It’s a 30 seconds job.

Next we need to add these two lines into BottomNavigationView declaration in XML layout.

Now you can Disabled and Enabled states of the BottomNavigationView options. It will be reflecting the stated look and feel from the selector file:

Disabled and Enabled states of BottomNavigationView

Once you have updated everything, that’s it …..Hurray ! Your job done, It was this easy. You should be able to make this run in less than 5 minutes.

And that’s it! if you have followed Step 1 to 5 as I described. Your job done.

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 ! If you are still struggling with BottomNavigationView then simple download the sample and try and debug it in order to learn it easily.