Home / UI / Material Design / How to build Android Material Design Bottom Navigation (Part 1)
Android Material Design Bottom Navigation

How to build Android Material Design Bottom Navigation (Part 1)

Google announced Material Design Support Library in their Google IO 2015. This month Google announced that there’s a new element to be added in Material Design components and it’s the Bottom Navigation. In this tutorial we’ll have a look on Android Material Design Bottom Navigation and how to implement it and understand its parameters and functions.

In the previous tutorial we discussed Android Material Design Floating Action Button (FAB) and Snackbar and you can check our Android Material Design Series from here. 

Quick Overview:

Bottom navigation bars make it easy to walk through between top-level views in a single tap as it provides quick navigation between top-level views of an app.

And according to Google design guidelines, the bottom navigation should consist of three to five items. In this tutorial we will be building 2 Activities, one has three buttons and the other has four buttons in the bottom navigation bar.

It consists of .XML file in menus and a java code to inflate this layout in your activity.

Three Buttons Navigation:

Android Material Design Bottom Navigation

 

1. Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Empty Activity and lets name ThreeButtonsActivity.

2. We need to add Material Design Support Library and the Bottom Navigation library so we can use it, so open build.gradle file and add the following code:

3. Let’s add some styles, Open colors.xml under res ⇒ values and add below color resources. If you don’t find colors.xml, create a new file with this name.

4. Lets create the menu file that represents the icons and its labels, So under res ⇒ menu add new menu resource file, name it three_buttons_menu and add the following code:

Note: You can download all icons used in the App through this link, Download and extract it path_to_app_folder\app\src\main\res

5. Now we need to inflate this menu in our activity class and instantiate the Bottom Navigation through this code

and we can customize the bottomBar icons color, theme, fonts and so on. through this code:

6. And this is the full code for the ThreeButtonsActivity.java, we are just adding Snackbar to see its interface with the Bottom Navigation, so we used Coordinator Layout.

7. Open the layout file the main activity activity_three_buttons.xml and add below code. This includes the parent layout CoordinatorLayout.

Run the project and test it. You should able see The Android Material Design Bottom Navigation and it will look like this: See Part 2 form here

Android Material Design Bottom Navigation

Android Material Design Bottom Navigation

You can see updates for this awesome library by visiting this link

Thanks to roughhike who made this library to use Android Material Design Bottom Navigation

Summary
Article Title
How to build Android Material Design Bottom Navigation tutorial
Description
Android Material Design Bottom Navigation bars tutorial shows how to implement using android support library and other android-arsenal library.
Author
Organization
Android Gifts

About #AndroidGifts

#AndroidGifts

Check Also

featured_image

Material Design Icons with Android Studio Plugin Drawable Importer – Library #1

In this tutorial we are having Material Design Icons with Android Studio Drawable Importer Plugin which …

4 comments

  1. this is great, so easy to implement
    but how do I set it so that it goes under navigation drawer?

    When I pull out navigation drawer, the bottom bar goes on top nav drawer and can still be touch

Leave a Reply