1.首先要在grade里依赖下
com.ashokvarma.android:bottom-navigation-bar:2.0.4
2.在布局文件里使用

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/px_1"
        android:background="@color/tab_text_default"
        />

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:bnbBackgroundColor="@color/bg_gray"
        />
</LinearLayout>

3.对bottomNavigationBar的一些设置

 mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        mBottomNavigationBar.setTabSelectedListener(this);
        //设置监听
        mBottomNavigationBar.clearAll();
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        //还用一种mode是Shifting,大家可以自己试下有何区别
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.icon_home_on, getString(R.string.text_main_tab_home))
                        .setInactiveIconResource(R.mipmap.icon_home_off)
                        .setActiveColorResource(R.color.tab_text_selected)
                        .setInActiveColorResource(R.color.tab_text_default))
//                        .setBadgeItem(badgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.icon_record_on, getString(R.string.text_main_tab_record))
                        .setInactiveIconResource(R.mipmap.icon_record_off)
                        .setActiveColorResource(R.color.tab_text_selected)
                        .setInActiveColorResource(R.color.tab_text_default))
                        //配置图片文字及选中时的颜色
                .setFirstSelectedPosition(0)    //默认位置就是0
                .initialise();//初始化

4.初始化viewPager

private void initViewPager() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

        mFragments = new ArrayList<>();
        mFragments.add(MainFragmentOne.newInstance());
        mFragments.add(MainFragmentTwo.newInstance());

        mViewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager(), mFragments));
        mViewPager.addOnPageChangeListener(this);
        mViewPager.setCurrentItem(0);
    }
 class SectionsPagerAdapter extends FragmentPagerAdapter {
    
        List<Fragment> fragments;

        public SectionsPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
            super(fm);
            this.fragments = fragments;
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

5.切换或滑动时设置参数

 @Override
    public void onTabSelected(int position) {
        mViewPager.setCurrentItem(position);
    }

 @Override
    public void onPageSelected(int position) {
        mBottomNavigationBar.selectTab(position);
    }

这些弄完功能就实现了,图就不贴了