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

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

In the previous tutorial we discussed Android Material Design Bottom Navigation and you can check our Android Material Design Series from here. 

In this tutorial we will continue on the first Android project we started and implement Bottom Navigation with consists of four items.

Quick Overview:

In this example we will build it programmatically not using XML, and we will use Fragments to be our content area, and navigate between fragments using the Bottom Navigation.

Also we will build Badges for the Bottom Navigation so we can use it to show notifications, unread message count or new items.

Four Buttons Navigation:

Android Material Design Bottom Navigation

1. In Android Studio, create a new activity, select Empty Activity and lets name FourButtonsActivity 

In the activity XML file put the following code which holds a frameLayout to hold the Fragment content

2. Lets start by creating a Simple Fragment, go and create new class and call it SampleFragment and add this code in it

5. Now we need to instantiate the Bottom Navigation in our activity class and set the four tabs with icons and labels through this code

also attach our Fragments to the Bottom Navigation

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

Lets add some styles and colors to our tabs by using mapColorForTab(TabIndex, “#color”)

Now it’s time for the magic part, lets add Badges to our tabs: bottomBar.makeBadgeForTabAt(tabIndex, “#color”, NumberToShow)

and we can customize the bottomBar icons fonts and text appearance through this code:

6. And this is the full code for the FourButtonsActivity.java

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

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
Description
Build Android Material Design Bottom Navigation programmatically using Fragments and Badges for the Bottom Navigation so we can use it to show notifications
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 …

9 comments

  1. Good Work Guys… Love It..

  2. when i am run this code my exception comes.like xmlpullpareser exception

  3. Thanks for the tutorial, is fantastic!
    One question, when i click in button, how can i doing for generate a new transition between diferents activities

    Thanks other time
    Reguards

    • #AndroidGifts

      I’h happy you liked the tutorial Alvaro,
      Actually the bottom navigation should be used to navigate between fragments,
      so if you want to override this behavior you would need to create bottom navigation in each activity you have to make transitions between them.

      please let me know if i answered your question and tell me if you have any other ones 🙂

  4. Hi,
    How can i change background color. I think it is set from colors (primaryColor)
    What if i want to set custom color?
    Thanks

    • #AndroidGifts

      Hello Rohit,
      If you meant changing the BottomNavigation background color, we have already declared in the code above:
      bottomBar.mapColorForTab(0, “#3B494C”);
      bottomBar.mapColorForTab(1, “#00796B”);
      bottomBar.mapColorForTab(2, “#7B1FA2”);
      bottomBar.mapColorForTab(3, “#FF5252”);

      did i get your point ? Thanks

Leave a Reply