效果图

QQ截图20180918111315.png

准备工作：

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:28.0.0-rc02'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    //添加design包
    implementation 'com.android.support:design:28.0.0-rc02'
}

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menu_navigation_home"
        android:icon="@mipmap/home"
        android:title="主页"></item>
    <item
        android:id="@+id/menu_navigation_novel"
        android:icon="@mipmap/novel"
        android:title="小说"></item>
    <item
        android:id="@+id/menu_navigation_person"
        android:icon="@mipmap/person"
        android:title="个人"></item>


</menu>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorBlue" android:state_checked="true"></item>

    <item android:color="@color/colorPrimary" android:state_checked="false"></item>

</selector>

QQ截图20180918135458.png

注：准备工作里面需要做的就是
①添加design依赖；
②color（颜色）的一些添加
③添加两个资源文件，位置在上图中清晰的标注了出来。

推荐两个网站：
[RGB颜色对照表](http://www.cnblogs.com/android100/p/android-rgb-list.html)
[阿里巴巴矢量图标库](http://iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3)

使用：

xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/act_main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/act_main_navigationView"></android.support.v4.view.ViewPager>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/act_main_navigationView"
        android:layout_width="match_parent"
        android:layout_height="48dp"//控件高度
        android:layout_alignParentBottom="true"//底部
        android:background="?android:attr/windowBackground"//背景
        app:itemBackground="@null"//item背景
        app:itemIconTint="@drawable/navigation_selector"//item图标状态
        app:itemTextColor="@drawable/navigation_selector"//item文字状态
        app:menu="@menu/navigation"></android.support.design.widget.BottomNavigationView>

</RelativeLayout>

注：我的Android studio版本4.1.3，在书写itemIconTint和itemTextColor属性时是没有drawable提示的，需要自己写完

activity

public class MainActivity extends BaseActivity {
    @BindView(R.id.act_main_viewpager)
    ViewPager viewPager;
    @BindView(R.id.act_main_navigationView)
    BottomNavigationView bottomNavigationView;
    /**
     * 主页
     */
    Fragment_Home fragment_home;
    /**
     * 小说
     */
    Fragment_Novel fragment_novel;
    /**
     * 个人
     */
    Fragment_Person fragment_person;

    /**
     * viewpager适配器
     */
    Viewpager_Adapter adapter_viewpager;

    MenuItem menuItem;
    @Override
    public void init() {
        fragment_home = new Fragment_Home();
        fragment_novel = new Fragment_Novel();
        fragment_person = new Fragment_Person();

        bottomNavigationView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener);
        viewPager.setOnPageChangeListener(onPageChangeListener);
        adapter_viewpager = new Viewpager_Adapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter_viewpager);
        ArrayList<Fragment> arrayList = new ArrayList<>();
        arrayList.add(fragment_home);
        arrayList.add(fragment_novel);
        arrayList.add(fragment_person);
        adapter_viewpager.setArrayList(arrayList);
    }

    private BottomNavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            menuItem = menuItem;
            switch (menuItem.getItemId()) {
                case R.id.menu_navigation_home:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.menu_navigation_novel:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.menu_navigation_person:
                    viewPager.setCurrentItem(2);
                    return true;
                default:
                    break;

            }
            return false;
        }
    };

    private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int i) {
            if (menuItem != null) {
                menuItem.setChecked(false);
            } else {
                bottomNavigationView.getMenu().getItem(0).setChecked(false);
            }
            menuItem = bottomNavigationView.getMenu().getItem(i);
            menuItem.setChecked(true);

        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    };


    @Override
    public int getLayout() {
        return R.layout.activity_main;
    }
}

注：activity我是书写了通用型的baseActivity你们demo使用时按平时继承的appCompatActivity就行，里面最重要的就是两个事件的监听

适配器

public class Viewpager_Adapter extends FragmentPagerAdapter {


    private ArrayList<Fragment> arrayList;

    public void setArrayList(ArrayList<Fragment> arrayList) {
        this.arrayList = arrayList;
        notifyDataSetChanged();
    }

    public Viewpager_Adapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        return arrayList.get(i);
    }

    @Override
    public int getCount() {
        return arrayList != null ? arrayList.size() : 0;
    }
}

总结

关于此文的底部导航栏没什么多得好说的，只是design添加了一个新的控件，更加美化，更加简单我们操作而已。我们不必再向以前一样用那种很复杂的布局来弄

最后感谢博主：Afanbaby