Best Android Bottom Navigation Libraries 2021

Coolest Android BottomNavigation Libraries this year.

A Bottom navigation bar is a navigation component that allows movement between primary destinations in an app. They typically display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.

According to material Bottom Navigation guidelines the following  are the principals of bottom navigation:

  1. Ergonomic – The bottom navigation bar should be easy to reach on a handheld mobile device.
  2. Consistent – The bottom navigation bar should appear at the bottom of every screen.
  3. Related – Bottom navigation bar destinations should be of equal importance.

In this blog post we explore some of the best android bottom navigation libraries. I have used some of these libraries in my projects and I plan to use some of them. These libraries are listed randomly on a first discovered, first listed manner.

(a). BottomNavigation

This Library helps users to use Bottom Navigation Bar (A new pattern from google) with ease and allows ton of customizations.

Here is a gif demo of this library in use:

Here are the features of this library:

  • This library is very customizale. You can attest to that by looking at the gif demo above.
  • It adheres to Google’s bottom navigation bar guidelines.
  • It allows you to select your own background and tab mode.
  • You can assign each tab a seperate color
  • You can render badges in the tabs. The badges can be customized.

Installation

Install the library using the following statement:

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.2.0'

How to use

First add the following in your xml layout:

<com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout\_gravity\="bottom"
        android:id\="@+id/bottom\_navigation\_bar"
        android:layout\_width\="match\_parent"
        android:layout\_height\="wrap\_content"/>

Then in your code, add bottom navigation items:

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .setFirstSelectedPosition(0)
                .initialise();

And listen to tab selection events:

        bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
            @Override
            public void onTabSelected(int position) {
            }
            @Override
            public void onTabUnselected(int position) {
            }
            @Override
            public void onTabReselected(int position) {
            }
        });

Read more here. Find full example here. Follow the author here.

(b). BottomNavigationViewEx

An enhancement of BottomNavigationView.

This library supports API 9 and above.

This library supports many styles.

You can use this library with ViewPager:

It also supports badges:

This library also supports centering a floating action button on the bottom navigation bar:

Installation

To install this library your compile sdk version must be 25 and above:

compileSdkVersion >= 25

Go to your root level build.gradle and add the following:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

Then add your implementation statement in the app level build.gradle:

implementation 'com.github.ittianyu:BottomNavigationViewEx:2.0.4'
implementation "com.android.support:design:28.0.0"

How to use it

To use this library, first go to your xml layout and add the following:

<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
    android:id\="@+id/bnve"
    android:layout\_width\="match\_parent"
    android:layout\_height\="wrap\_content"
    android:layout\_alignParentBottom\="true"
    android:background\="@color/colorPrimary"
    app:itemIconTint\="@color/selector\_item\_color"
    app:itemTextColor\="@color/selector\_item\_color"
    app:menu\="@menu/menu\_navigation\_with\_view\_pager" />

Then in your java/kotlin code reference the view:

BottomNavigationViewEx bnve = (BottomNavigationViewEx) findViewById(R.id.bnve);

If you want to disable animation:

bnve.enableAnimation(false);
bnve.enableShiftingMode(false);
bnve.enableItemShiftingMode(false);

If you want to change text and icon size:

bnve.setIconSize(widthDp, heightDp);
bnve.setTextSize(sp);

To connect this bottom navigation view with viewpager:

// set adapter
adapter = new VpAdapter(getSupportFragmentManager(), fragments);
bind.vp.setAdapter(adapter);

// binding with ViewPager
bind.bnve.setupWithViewPager(bind.vp);

If you want to use a badge, then first install the badgeview:

implementtion 'q.rorbin:badgeview:1.1.0'

Then:

// add badge
addBadgeAt(2, 1);

private Badge addBadgeAt(int position, int number) {
    // add badge
    return new QBadgeView(this)
            .setBadgeNumber(number)
            .setGravityOffset(12, 2, true)
            .bindTarget(bind.bnve.getBottomNavigationItemView(position))
            .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {
                @Override
                public void onDragStateChanged(int dragState, Badge badge, View targetView) {
                    if (Badge.OnDragStateChangedListener.STATE_SUCCEED == dragState)
                        Toast.makeText(BadgeViewActivity.this, R.string.tips_badge_removed, Toast.LENGTH_SHORT).show();
                }
            });
}

NB/= Other usages with this library are the same as the official BottomNavigationView.

Read more here. Find full example here. Follow the author here.

(c). Material-BottomNavigation

Bottom Navigation widget component inspired by the Google Material Design Guidelines at Design Specs.

Here is the demo:

Material-BottomNavigation Library

Step 1: Install it

To use it you start by installing it:

implementation 'it.sephiroth.android.library.bottomnavigation:bottom-navigation:3.0.0'

Step 2: Create Menu

Next create a menu resource file to contain bottomnavigation items:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/black"
    app:bbn_badgeColor="#FFFF0000"
    app:bbn_rippleColor="#33ffffff">
    <item
        android:id="@+id/bbn_item1"
        android:color="@color/colorPrimary"
        android:icon="@drawable/ic_cloud_off_white_24dp"
        android:title="Cloud Sync" />
    <item
        android:id="@+id/bbn_item2"
        android:color="@android:color/holo_green_dark"
        android:icon="@drawable/ic_cast_connected_white_24dp"
        android:title="Chromecast" />
    <item
        android:id="@+id/bbn_item3"
        android:color="@android:color/holo_orange_dark"
        android:icon="@drawable/ic_mail_white_24dp"
        android:title="Mail" />
    <item
        android:id="@+id/action4"
        android:color="#FF5252"
        android:icon="@drawable/ic_format_list_numbered_white_24dp"
        android:title="List" />
</menu>

Step 3: Add to Layout

The next step is to add the bottomnavigation to your xml layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout android:id="@+id/CoordinatorLayout01"
    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"
    android:fitsSystemWindows="true">

    ...your content...

    <it.sephiroth.android.library.bottomnavigation.BottomNavigation
        android:id="@+id/BottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:bbn_entries="@menu/bottombar_menu_4items"
        app:bbn_scrollEnabled="true"
        app:bbn_badgeProvider="@string/bbn_badgeProvider"
        app:layout_behavior="@string/bbn_phone_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 4: Write Code

next you can simply reference the bottomnavigation view in your code and use it.

Adding Badges

We can also add badges in bottomnavigation items as follows:

Here’s the code to do it:

    final BadgeProvider provider = bottomNavigationView.getBadgeProvider();
    provider.show(R.id.bbn_item3);

To remove the badge use the following code:

  bottomNavigation.getBadgeProvider().remove(R.id.bbn_item3);

Reference

Here are the links:

No. Link
1. Read more
2. Examples

Other Bottom Navigation Libraries

(a). BottomBar (Deprecated)

A custom view component that mimics the new Material Design Bottom Navigation pattern.

Here is the demo of bottombar:

BottomBar

Step 1: Install it

You start by installing it as below:

Step 2: Create menu

You then create the menu resource file:

<tabs>
    <tab
        id="@+id/tab_favorites"
        icon="@drawable/ic_favorites"
        title="Favorites" />
    <tab
        id="@+id/tab_nearby"
        icon="@drawable/ic_nearby"
        title="Nearby" />
    <tab
        id="@+id/tab_friends"
        icon="@drawable/ic_friends"
        title="Friends" />
</tabs>

Step 3: Add to Layout

Next you add it to your XML layout:

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

    <!-- This could be your fragment container, or something -->
    <FrameLayout
        android:id="@+id/contentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomBar" />

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />

</RelativeLayout>

Step 4: Write Code

Then you write code, for example listen to selection events of the bottombar items:

public class MainActivity extends Activity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_favorites) {
                    // The tab with id R.id.tab_favorites was selected,
                    // change your content accordingly.
                }
            }
        });
    }
}

Reference

Here are the links:

No. Link
1. Read more
2. Examples

BEFORE YOU GO

YOU'VE BEEN SELECTED FOR A GIFT

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Related Examples

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code