先上图

预览效果

1.创建一个android studio工程并依赖最新的Design Support Library(25) 在app的build.gradle中：

compile 'com.android.support:design:25.0.0'

接下来就可以使用BottomNavigationView控件了。

2.为MainActivity创建如下布局：

app:itemBackground:设置item的背景，对应setItemBackgroundResource(int resId)方法
app:itemIconTintUsed:设置icon的颜色，对应setItemIconTintList(ColorStateList tint)方法
app:itemTextColor:设置文字的颜色，对应setIteTextColor(ColorStateList textColor)方法

3.创建Fragment和ViewPagerAdapter为ViewPager服务，代码略去。

4.为ViewPager设置adapter ，添加fragment：

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

    adapter.addFragment(DemoFragment.newInstance("拨号"));
    adapter.addFragment(DemoFragment.newInstance("信息"));
    adapter.addFragment(DemoFragment.newInstance("我的"));
    viewPager.setAdapter(adapter);
}

5.为BottomNavigationView添加OnNavigationItemSelectedListener，复写OnNavigationItemSelected方法，这里通过item的id判断选择不同的时候ViewPagerAdapter选中的位置。

bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.item_call:
                            viewPager.setCurrentItem(0);
                            break;
                        case R.id.item_mail:
                            viewPager.setCurrentItem(1);
                            break;
                        case R.id.item_person:
                            viewPager.setCurrentItem(2);
                            break;
                    }
                    return false;
                }
            });

6.为ViewPagerAdapter设置OnPageChangeListener，本文重要代码在此，当ViewPagerAdapter滑动fragment的时候BottomNavigationView的选中状态也跟着变化

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

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

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

github BottomNavigationViewDemo