Bottom Navigation Bar Android Tutorial

One of the newest additions to the Material Design guidelines is Bottom Navigation. Its like the TabBar you see on iOS, and similar in functionality too.

android bottom navigation tabs

Android Bottom Navigation

facebook iOS app tabbar

Facebook iOS App

Before getting to the tutorial, let’s get to know what Bottom Navigation is. Also let’s narrow down on the best scenarios to use it.

What is Bottom Navigation?

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. – Material Design spec

Again, iOS users would feel completely at home with this, since its exactly the same.

This helps developers opt for Bottom Navigation, instead of a Navigation Drawer. If you have about four top-level navigation items, its ideal to use Bottom Navigation. Otherwise, go for a Navigation Drawer. We don’t want the Bottom Navigation looking too crowded now, do we?

When to use?

When you have three to five top-level destinations of similar importance. This may confuse you with Tabs. But not to worry.

I would make a call between the two, depending on how many navigation items I need. Let’s clarify this with a use case.

Take the Play Store app. There are six different Tabs to navigate or swipe around.

play store app tabs

Play Store App Tabs

Here’s the Play Store’s home screen:

play store app home

Home screen (non-swipeable Tabs)

Well, these look like Tabs too, but not swipeable. This is a perfect use case for Bottom Navigation!

Also notice that the Navigation Drawer remains accessible from all screens. Just swipe from the left edge. Now this, is an ideal structured app!

READ RELATED:


Getting Started

Yet with all that aside, I must admit the Bottom Navigation looks pretty cool. So right when I started to make it, I noticed Aurelien Hubert’s library for the same. That was a godsend!

So let’s get right to using that.

Add the library’s dependency to your build.gradle file.

dependencies {
    compile 'com.aurelhubert:ahbottomnavigation:0.1.3'
}

NOTE: This library support minSDK 14 and above only.

Next, add the Bottom Navigation layout to XML.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:elevation="4dp"
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />

</FrameLayout>

The FrameLayout with ID frame is the placeholder UI to load our Fragment.

Action Plan

Each Bottom Navigation bar item denotes a different colour. For demonstration purposes, each item click will change the Fragment’s view colour. But ideally, you’ll want to load a different Fragment for each item.

Setting up Bottom Navigation

1. Create your Items

AHBottomNavigationItem item1 = new AHBottomNavigationItem("Green", R.drawable.ic_map_24dp, Color.parseColor(colors[0]));

Create the number of items you need. colors[] is a String Array containing the the hashed color codes.

2. Add items to Bottom Navigation

bottomNavigation.addItem(item1);

3. Style it

bottomNavigation.setDefaultBackgroundColor(Color.parseColor("#FEFEFE"));

       bottomNavigation.setAccentColor(Color.parseColor("#F63D2B"));
       bottomNavigation.setInactiveColor(Color.parseColor("#747474"));

       //  Enables Reveal effect
       bottomNavigation.setColored(true);

       bottomNavigation.setCurrentItem(0);

4. Set Listener

Finally, you need to listen to item clicks, so you can make changes to your Fragment.

bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
          @Override
          public void onTabSelected(int position, boolean wasSelected) {

              fragment.updateColor(Color.parseColor(colors[position]));
          }
      });

I have a tiny card layout centered in my Fragment layout. Depending on the item click, I change its color.

Ideally, you’d want to change the Fragment. This is highly similar to how its done when making a Navigation Drawer.

 

Adding a Fragment

You can add a simple Fragment and load it into the FrameLayout like this.

getSupportFragmentManager()
             .beginTransaction()
             .add(R.id.frame, fragment, "square")
             .commit();

You can read more about Fragments here.

TIP:

You can swap out Fragments using this:

NewFragment newFragment = new NewFragment();

 getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.frame, newFragment, fragment.getClass().getName())
                .commit();

Final Output

With all that in place, your Bottom Navigation Tabs will now be working. Run your app and take a look.

bottom navigation bar output

SOURCE CODE: GitHub


Now, some of you may notice this does not conform a hundred percent to the Material Design spec. If you feel those are not negligible, try out this alternate library. Clearly it is the more popular (and fancier) one. But I’m happy with how the current one works. Moreover the Bottom Bar by roughike (alternate one), doesn’t seem to work for me.

So what do you think about Bottom Navigation? It’s the latest addition to Material Design. A few already use this navigation pattern, like the Google Photos app.

I’m more excited about what’s new in Material Design than Android N! What about you? Let me know in the comments below.

Suleiman

Android developer and tech enthusiast. Love creating apps with good UI UX design. I also like to sketch and listen to Chillstep.

You may also like...

  • Mohammadreza Salari

    very useful tutorial .
    i just have a question . how i can create multiple fragment and switch between those with keep parsed data(parsed data in each fragment)

  • kunal

    I already checked this library but what i don’t understand is how to set the scrolling behavior so that it disappears when i scroll let’s say a recycler-view. In that demo it runs great and show-hide the bottom bar based on scrolling, but i couldn’t find app:layout_behavior=”@string/appbar_scrolling_view_behavior” anywhere.

    I want to achieve that same thing but somehow i am failing to do that. One more thing can i use both AppBarLayout with toolbar and this bottom bar navigation and screen has the listview as content and based on scrolling the list i can handle the visibility of both the bars? Thanks.

  • Haryantp

    i set two items in bottom bar, but i cant customize the padding . anyone can help?

    • I’m afraid the library by default, doesn’t allow you to modify padding. I believe it conforms to the metrics suggested by the Material Design guidelines.

  • Tshepo Stark

    Hi, nice tutorial thanks…I have a problem though, for the life of me I cant seem to manage to style my bottom bar, its always gray and white

    • Hi Tshepo,
      How is it that you’re styling the Bottom Bar?
      You can programmatically set the Bottom Bar color using setDefaultBackgroundColor()
      Even the icons can be colored by tinting each Drawable before instantiating AHBottomNavigationItem.

      • Tshepo Stark

        thank you so much for your reply.. here are the methods I used to style my bar, it still comes out grey

        bottomNavigation.setDefaultBackgroundColor(Color.parseColor(“#FEFEFE”));
        bottomNavigation.setAccentColor(Color.parseColor(“#F63D2B”));
        bottomNavigation.setInactiveColor(Color.parseColor(“#747474”));