引入依赖：

compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'

xml布局中使用:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    </FrameLayout>


    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">

    </com.ashokvarma.bottomnavigation.BottomNavigationBar>
</FrameLayout>

java代码:

package com.picc.mcp.lifemobile.material;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.ashokvarma.bottomnavigation.TextBadgeItem;
import com.picc.mcp.lifemobile.R;
import com.picc.mcp.lifemobile.fragment.FindFragment;
import com.picc.mcp.lifemobile.fragment.HomePageFragment;
import com.picc.mcp.lifemobile.fragment.MeFragment;
import com.picc.mcp.lifemobile.fragment.ProductFragment;

import butterknife.BindView;
import butterknife.ButterKnife;

;

/**
 * Created by fengxing on 2018/5/25.
 * https://github.com/Ashok-Varma/BottomNavigation 项目中使用
 * <p>
 * Material风格底部导航栏
 * https://github.com/aurelhubert/ahbottomnavigation也很好用的
 */

public class MaterialBottomNavigationBarActivity extends AppCompatActivity {

    private static final String TAG = MaterialBottomNavigationBarActivity.class.getSimpleName();
    private int[] mDrawables = {R.drawable.home_page_black, R.drawable.icons8_compass_96, R.drawable.icons8_product_96, R.drawable.icons8_user_96};

    private int[] mDrawableStrs = {R.string.home_page, R.string.find, R.string.product, R.string.me};

    int[] modes = {BottomNavigationBar.MODE_DEFAULT, BottomNavigationBar.MODE_FIXED, BottomNavigationBar.MODE_FIXED_NO_TITLE, BottomNavigationBar.MODE_SHIFTING, BottomNavigationBar.MODE_SHIFTING_NO_TITLE};

    int[] backgrounds = {BottomNavigationBar.BACKGROUND_STYLE_DEFAULT, BottomNavigationBar.BACKGROUND_STYLE_RIPPLE, BottomNavigationBar.BACKGROUND_STYLE_STATIC};

    private int mode_position = 0;

    @BindView(R.id.bottom_navigation_bar)
    BottomNavigationBar bottomNavigationBar;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.material_bottom_navigation_bar);
        ButterKnife.bind(this);

        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);


        TextBadgeItem textBadgeItem = new TextBadgeItem();
        textBadgeItem.setText("99");


        bottomNavigationBar.
                addItem(new BottomNavigationItem(mDrawables[0], mDrawableStrs[0]).setActiveColorResource(R.color.chocolate).setBadgeItem(textBadgeItem))
                .addItem(new BottomNavigationItem(mDrawables[1], mDrawableStrs[1]).setActiveColorResource(R.color.indigo))
                .addItem(new BottomNavigationItem(mDrawables[2], mDrawableStrs[2]).setActiveColorResource(R.color.darkmagenta))
                .addItem(new BottomNavigationItem(mDrawables[3], mDrawableStrs[3]).setActiveColorResource(R.color.palegreen))
                .setFirstSelectedPosition(0)
                .initialise();
        setDefaultFragment();
        bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
                Log.d(TAG, "onTabSelected: " + position);
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                switch (position) {
                    case 0:
                        HomePageFragment homePageFragment = HomePageFragment.newInstance();
                        transaction.replace(R.id.frame_container, homePageFragment);
                        break;
                    case 1:
                        FindFragment findFragment = FindFragment.newInstance();
                        transaction.replace(R.id.frame_container, findFragment);
                        break;
                    case 2:
                        ProductFragment productFragment = ProductFragment.newInstance();
                        transaction.replace(R.id.frame_container, productFragment);
                        break;
                    case 3:
                        MeFragment meFragment = MeFragment.newInstance();
                        transaction.replace(R.id.frame_container, meFragment);
                        break;
                }

                transaction.commit();
            }

            @Override
            public void onTabUnselected(int position) {
                Log.d(TAG, "onTabUnselected: " + position);
            }

            @Override
            public void onTabReselected(int position) {
                Log.d(TAG, "onTabReselected: " + position);
            }
        });

    }

    private void setDefaultFragment() {
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.frame_container, HomePageFragment.newInstance())
                .commit();
    }
}

简单粗暴明了，不需要仔细说明。
最后贴上Gif:

bottom_default.gif

fixed+static.gif

666.gif

设置mode和background。慢慢调试吧。