Welcome to today’s tutorial. In this piece we want to look at some options for inducing  a bottom bar in your application. Mostly we will be looking at how to work with the botttom navigation bar component.

What You Will Learn

Here are the concepts you will learn in this tutorial:

  1. What is a Bottom Navigation bar
  2. How to use a bottom navigation view – simple example.
  3. How to create swipeable bottom bar.
  4. How to use BottomNavigationView with Fragments and Viewpager.
  5. How to create animated bottomnavigationview with shimmer effect.

What is a Bottom Navigation Bar?

According to android’s official documentation:

It represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.

Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.

The bar can disappear on scroll, based on HideBottomViewOnScrollBehavior, when it is placed within a CoordinatorLayout and one of the children within the CoordinatorLayout is scrolled. This behavior is only set if the layout_behavior property is set to HideBottomViewOnScrollBehavior.

The bar contents can be populated by specifying a menu resource file. Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for programmatically selecting which destination is currently active. It can be done using MenuItem#setChecked(true).

Here are the steps followed in using a bottom navigation view:

Add it to your Layout Resource as follows:

<com.google.android.material.bottomnavigation.BottomNavigationView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schema.android.com/apk/res/res-auto"
     android:id="@+id/navigation"
     android:layout_width="match_parent"
     android:layout_height="56dp"
     android:layout_gravity="start"
     app:menu="@menu/my_navigation_items" />

Create Navigation Items menu resource file as follows:

 <menu xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@+id/action_search"
          android:title="@string/menu_search"
          android:icon="@drawable/ic_search" />
     <item android:id="@+id/action_settings"
          android:title="@string/menu_settings"
          android:icon="@drawable/ic_add" />
     <item android:id="@+id/action_navigation"
          android:title="@string/menu_navigation"
          android:icon="@drawable/ic_action_navigation_menu" />
 </menu>

Then lastly reference and use it in your java/kotlin code. Proceed to check our examples.

Video Tutorial

If you prefer a video tutorial then we have one:

We start by seeing what BottomNavigation is as a general design pattern, then see the BottomNavigationView for android, then look at some examples.

Bottom Navigation Example in Java

Step 1: Create Activity

MainActivity.java

Here is our main activity file. This is the only java we write in this example.

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

        final TextView newsTextView = findViewById(R.id.newsTextView);
        final TextView techTextView = findViewById(R.id.techTextView);
        final TextView entertainmentTextView = findViewById(R.id.entertainmentTextView);

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_news:
                                newsTextView.setVisibility(View.VISIBLE);
                                techTextView.setVisibility(View.GONE);
                                entertainmentTextView.setVisibility(View.GONE);
                                break;
                            case R.id.action_tech:
                                newsTextView.setVisibility(View.GONE);
                                techTextView.setVisibility(View.VISIBLE);
                                entertainmentTextView.setVisibility(View.GONE);
                                break;
                            case R.id.action_entertainment:
                                newsTextView.setVisibility(View.GONE);
                                techTextView.setVisibility(View.GONE);
                                entertainmentTextView.setVisibility(View.VISIBLE);
                                break;
                        }
                        return false;
                    }
                });
    }
}

Step 2: Create Layout Resource

activity_main.xml

Here’s our main activity’s layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent">

    <TextView
        android_id="@+id/newsTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_news" />

    <TextView
        android_id="@+id/techTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_tech"
        android_visibility="gone" />

    <TextView
        android_id="@+id/entertainmentTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_entertainment"
        android_visibility="gone" />

    <android.support.design.widget.BottomNavigationView
        android_id="@+id/bottom_navigation"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_alignParentBottom="true"
        app_itemBackground="@color/colorPrimary"
        app_itemIconTint="@color/white"
        app_itemTextColor="@color/white"
        app_menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Step 3: Create Menu Resource file

bottom_navigation_main.xml

This is our menu. Place it under the menu resource directory.

<?xml version="1.0" encoding="utf-8"?>
<menu
    >
    <item
        android_id="@+id/action_news"
        android_enabled="true"
        android_icon="@drawable/ic_favorite_white_24dp"
        android_title="@string/txt_news"
        app_showAsAction="ifRoom" />
    <item
        android_id="@+id/action_tech"
        android_enabled="true"
        android_icon="@drawable/ic_access_time_white_24dp"
        android_title="@string/txt_tech"
        app_showAsAction="ifRoom" />
    <item
        android_id="@+id/action_entertainment"
        android_enabled="true"
        android_icon="@drawable/ic_audiotrack_white_24dp"
        android_title="@string/txt_entertainment"
        app_showAsAction="ifRoom" />
</menu>

Let’s look at some more downloadable bottomnavigationview examples.

Example 1: Kotlin Android Simple BottomNavigationView with Fragments Example

This is a simple bottom navigationview example written in Kotlin. In this example you will be able to switch through 3 fragments by clicking the corresponding bottom navigation ba item.

The fragments simply contain a textview with some text. Check the demo below:

Kotlin Android Bottom navigation example

Step 1: Dependencies

No special or third party dependency is needed.

Step 2: Design Layouts

There will be 4 layouts:

  1. 3 Fragment layouts
  2. 1 main activity layout.

Fragment Layouts

The general design of the fragment layouts is similar. All have a textview at the center that will display the text fro te chosen fragment:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Learn"
        android:textSize="35dp"
        android:gravity="center"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity Layout

On the other hand the main activity layout will contain a framelayout as well as the bottomnavigationview:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.9"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_bottom_navigation"
        android:layout_weight="0.1"/>

</LinearLayout>

Step 3: Create Fragments

There will be 3 fragments:

(a). fra1.kt

The first fragment:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class frag1 : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_1 , container , false)
    }

}

(b). frag2.kt

The code for the second fragment:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class frag2 : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_2 , container , false)
    }

}

(c). frag3.kt

The code for the third fragment:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class frag3 : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_3 , container , false)
    }

}

Step 4: Create Activity

Finally you need to create an activity that will host the fragments. The major thing here is that you will have a function that will be setting a fragment to the activity via fragment transaction as follows;

    fun setFragment(fr : Fragment){
        val frag = supportFragmentManager.beginTransaction()
        frag.replace(R.id.fragment,fr)
        frag.commit()
    }

So you willb basically be invoking this method and passing in the appropriate fragment based on the bottom navigation view item selected:

bottomNav.setOnNavigationItemSelectedListener {menu ->

            when(menu.itemId){

                R.id.btn1 -> {
                    setFragment(frag1())
                    true
                }

                R.id.btn2 -> {
                    setFragment(frag2())
                    true
                }

                R.id.btn3 -> {
                    setFragment(frag3())
                    true
                }

                else -> false
            }
        }

    }

Here is the full code;

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        bottomNav.menu.getItem(0).isCheckable = true
        setFragment(frag1())

        bottomNav.setOnNavigationItemSelectedListener {menu ->

            when(menu.itemId){

                R.id.btn1 -> {
                    setFragment(frag1())
                    true
                }

                R.id.btn2 -> {
                    setFragment(frag2())
                    true
                }

                R.id.btn3 -> {
                    setFragment(frag3())
                    true
                }

                else -> false
            }
        }

    }

    fun setFragment(fr : Fragment){
        val frag = supportFragmentManager.beginTransaction()
        frag.replace(R.id.fragment,fr)
        frag.commit()
    }

}

Reference

Find the code reference links below:

No. Link
1. Download code
2. Browse code
3. Follow code author

Example 2 – BottomNavigationView with Fragments

In this lesson we want to explore BottomNavigationView examples. We want to look at as many examples as we can. Be aware that some examples may be using older support libraries, however you can easily update the code to androidx using android studio.

This example is written in Java. It teaches how to show bottom navigation with icons and connect each tab with Fragments.

When a tab is selected, its corresponding fragment is rendered as well.

Step 1: Create Favorites Fragment

(a). FavoritesFragmemt

Create a Favorites Fragment:

public class FavouriteFragment extends Fragment {

    public FavouriteFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_favourite, container, false);
    }
}

Step 2: Create a Video Fragment

(b). VideoFragmemt

The Videos Fragment:

public class VideoFragment extends Fragment {

    public VideoFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_video, container, false);
    }
}

Step 3: Create a Music Fragment

(c). MusicFragmemt

The Music Fragment:

public class MusicFragment extends Fragment {

    public MusicFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_music, container, false);
    }
}

Step 4: Create Main Activity

(d). MainActivity

The activity that will host all these fragments:

public class MainActivity extends AppCompatActivity {

    private Fragment fragment;
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fragmentManager = getSupportFragmentManager();
        fragment = new FavouriteFragment();
        final FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.main_container, fragment).commit();

        BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_favorites:
                                fragment = new FavouriteFragment();
                                break;
                            case R.id.action_video:
                                fragment = new VideoFragment();
                                break;
                            case R.id.action_music:
                                fragment = new MusicFragment();
                                break;
                        }
                        final FragmentTransaction transaction = fragmentManager.beginTransaction();
                        transaction.replace(R.id.main_container, fragment).commit();
                        return true;
                    }
                });
    }
}

Run

If you run the project you will get the following:

BottomNavigationview Example

Download

No Link
1. Direct Download

Follow Project Author

Example 3 – BottomNavigationview with Shimmer Effect

The difference with the first example is shown in the below image:

Bottom Navigation with Shimmer

Lets go.

It only works if you set white color for background android:background="@android:color/white"

Note that ripple effect will disappear if you use app:itemBackground property.

Handling enabled/disabled state:

You need to create selector file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:color="@android:color/darker_gray"  />
</selector>

If you want change standard grey ripple effect, change colorControlHighlight property in AppTheme so it looks like following:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorPrimaryRipple</item>
</style>

Use 26% alpha for colored ripples.

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryRipple">#423F51B5</color>

MainActivity

Here is the code:


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

        final TextView textView = (TextView) findViewById(R.id.textView);

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_chat:
                                textView.setText(getResources().getString(R.string.text_chat));
                                break;
                            case R.id.action_offers:
                                textView.setText(getResources().getString(R.string.text_offers));
                                break;
                            case R.id.action_notifications:
                                textView.setText(getResources().getString(R.string.text_notifications));
                                break;
                        }
                        return true;
                    }
                });
    }
}

Download Code

Direct Download

Credit

This code has been shared by @Luksha

Example 4 – BottomNavigationView with Swipeable fragments

This example improves on the other examples by adding the ability to swipe from one fragment to the other. This swipe capability is added via ViewPager.

(a). FirstFragment

The FirstFragment code:


public class FirstFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_first, container, false);
    }

}

(b). SecondFragment

The SecondFragment code:


public class SecondFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_second, container, false);
    }
}

(c). ThirdFragment

The ThirdFragment code:

public class ThirdFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_third, container, false);
    }
}

(d). OnPageChangeAdapter

The OnPageChangeAdapter code:


public abstract class OnPageChangeAdapter implements ViewPager.OnPageChangeListener {

    private int mFirstPosition = 0;

    public OnPageChangeAdapter(int firstPosition){
        mFirstPosition = firstPosition;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        onPageSelected(mFirstPosition, position);
        mFirstPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public abstract void onPageSelected(int lastposition, int position);
}

(e). MainActivity

The MainActivity code:

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mNavigationMenuView;
    private ViewPager mViewPage;

    private ArrayList<Fragment> data = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.mViewPage = (ViewPager) findViewById(R.id.view_page);
        this.mNavigationMenuView = (BottomNavigationView) findViewById(R.id.demo_navigation);

        data.add(new FirstFragment());
        data.add(new SecondFragment());
        data.add(new ThirdFragment());

        mViewPage.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return data.get(position);
            }

            @Override
            public int getCount() {
                return data.size();
            }
        });

        mViewPage.addOnPageChangeListener(new OnPageChangeAdapter(0) {

            @Override
            public void onPageSelected(int lastposition, int position) {
                mNavigationMenuView.getMenu().getItem(position).setChecked(true);
                mNavigationMenuView.getMenu().getItem(lastposition).setChecked(false);
            }
        });

        mNavigationMenuView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_recent:
                        mViewPage.setCurrentItem(0);
                        break;
                    case R.id.action_favorite:
                        mViewPage.setCurrentItem(1);
                        break;
                    case R.id.action_nearby:
                        mViewPage.setCurrentItem(2);
                        break;
                }
                return true;
            }
        });
    }
}

Download Code

Download code below:

No. Link
1. Download code
2. Follow Project Author

Example 5: Kotlin BottomNavigationView with Fragments

A BottomNavigationView Represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.

Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.

The bar contents can be populated by specifying a menu resource file. Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for programmatically selecting which destination is currently active. It can be done using MenuItem#setChecked(true).

Here is the demo image:

Kotlin Android BottomNavigation Example

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No External dependencies are needed for this project.

Step : Fragments

Here are our fragments:

FragmentDashboard.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class FragmentDashboard : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_dashboard, container, false)
    }

}

FragmentNotification.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class FragmentNotification : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_notification, container, false)
    }
}

FragmentHome.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class FragmentHome : Fragment() {

    /**
     * Initialize newInstance for passing parameters
     */
    companion object {
        fun newInstance(): FragmentHome {
            val fragmentHome = FragmentHome()
            val args = Bundle()
            fragmentHome.arguments = args
            return fragmentHome
        }

    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_home, container, false)
    }
}

Step :

MainActivity.kt

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.fragment.app.Fragment
import androidx.appcompat.app.AppCompatActivity
import android.widget.FrameLayout

class MainActivity : AppCompatActivity() {

    private var content: FrameLayout? = null

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {

                val fragment = FragmentHome.Companion.newInstance()
                addFragment(fragment)

                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                val fragment = FragmentDashboard()
                addFragment(fragment)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                val fragment = FragmentNotification()
                addFragment(fragment)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        content = findViewById(R.id.content)
        val navigation = findViewById<BottomNavigationView>(R.id.navigation)
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

        val fragment = FragmentHome.Companion.newInstance()
        addFragment(fragment)
    }

    /**
     * add/replace fragment in container [FrameLayout]
     */
    private fun addFragment(fragment: Fragment) {
        supportFragmentManager
                .beginTransaction()
                .setCustomAnimations(R.anim.design_bottom_sheet_slide_in, R.anim.design_bottom_sheet_slide_out)
                .replace(R.id.content, fragment, fragment.javaClass.simpleName)
                .commit()
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number Link
1. Download Example
2. Follow code author
3. Code: Apache 2.0 License

Best Android Bottom Navigation Libraries 2022

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