BottomNavigationBar+ViewPager+Fragment实现底部菜单栏，使用比较方便，记录一下使用方法，下面是效果图：

QQ截图20190304160943.png

1、fragment切换的Adapter

public 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();
    }
}

2、MainActivity中写了相关的使用方法

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener
        , ViewPager.OnPageChangeListener {
    private ViewPager viewPager;
    private BottomNavigationBar bottomNavigationBar;
    private List<Fragment> fragments;

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

    private void initView() {
        initViewPager();
        initBottomNavigationBar();

    }

    private void initBottomNavigationBar() {

        BadgeItem badge = new BadgeItem()
                //Badge的Border(边界)宽度
                .setBorderWidth(2)
                //Badge的Border颜色
                .setBorderColor("#FF0000")
                //Badge背景颜色
                .setBackgroundColor("#9ACD32")
                //位置，默认右上角
                .setGravity(Gravity.RIGHT | Gravity.TOP)
                .setText("22")
                .setTextColor("#FF4081")//文本颜色
                .setAnimationDuration(2000)
                .setHideOnSelect(true);//当选中状态时消失，非选中状态显示

        bottomNavigationBar = findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar.setTabSelectedListener(this);
        bottomNavigationBar.clearAll();
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.icon_main_home_selected, R.string.home)
                        .setInactiveIconResource(R.drawable.icon_main_home_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_category_selected, R.string.category)
                        .setInactiveIconResource(R.drawable.icon_main_category_normal)
                        .setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_discover_selected, R.string.discover)
                        .setInactiveIconResource(R.drawable.icon_main_discover_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_mine_selected, R.string.mine)
                        .setInactiveIconResource(R.drawable.icon_main_mine_normal)
                        .setActiveColorResource(R.color.grey).setBadgeItem(badge))
                .initialise();


    }

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

        fragments = new ArrayList<>();
        fragments.add(new HomeFragment());
        fragments.add(new CatagoryFragment());
        fragments.add(new DiscoverFragment());
        fragments.add(new UserCentralFragment());

        viewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager(), fragments));
        viewPager.addOnPageChangeListener(this);
        viewPager.setCurrentItem(0);
    }

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

    }

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

    @Override
    public void onPageScrollStateChanged(int state) {

    }

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

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

3、activity对应的layout文件

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context="com.example.qqq.bottomnavigationbarandviewpagerandfragment.MainActivity">

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

    </android.support.v4.view.ViewPager>

    <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>
</LinearLayout>

4、dimens文件也比较重要，相应的参数可以在dimens文件中进行修改，字体大小，间距等。

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>


    // 以下是BottomNavigationBar属性
    <dimen name="fixed_min_width">120dp</dimen>
    <dimen name="fixed_min_width_small_views">104dp</dimen>
    <dimen name="fixed_max_width">168dp</dimen>
    <dimen name="fixed_width_padding">12dp</dimen>

    <dimen name="fixed_height">56dp</dimen>
    <dimen name="fixed_no_title_icon_container_height">42dp</dimen>
    <dimen name="fixed_no_title_icon_container_width">56dp</dimen>
    <dimen name="fixed_no_title_icon_height">32dp</dimen>
    <dimen name="fixed_no_title_icon_width">32dp</dimen>
    <dimen name="fixed_height_top_padding_inactive">2dp</dimen><!-- 8(Top Padding) - 12/2(extra padding due to badges) = 2 -->
    <dimen name="fixed_height_top_padding_active">0dp</dimen><!-- 6(Top Padding) - 12/2(extra padding due to badges) = 0 -->
    <dimen name="fixed_height_bottom_padding">10dp</dimen>

    <dimen name="fixed_label_active">14sp</dimen>
    <dimen name="fixed_label_inactive">12sp</dimen>
    <item name="fixed_label_active_to_inactive_ratio" format="float" type="dimen">0.857</item>

    <dimen name="fixed_icon_grid">24dp</dimen>
    <dimen name="fixed_icon_badge_grid_height">36dp
    </dimen><!-- this adds 6 dp extra to top and bottom icon -->
    <dimen name="fixed_icon_badge_grid_width">48dp
    </dimen><!-- this adds 6 dp extra to top and bottom icon -->


    <dimen name="shifting_min_width_active">96dp</dimen>
    <dimen name="shifting_max_width_active">168dp</dimen>
    <dimen name="shifting_min_width_inactive">64dp</dimen>
    <dimen name="shifting_max_width_inactive">96dp</dimen>
    <dimen name="shifting_width_custom_padding">6dp</dimen>

    <dimen name="shifting_height">56dp</dimen>
    <dimen name="shifting_no_title_icon_container_height">42dp</dimen>
    <dimen name="shifting_no_title_icon_container_width">56dp</dimen>
    <dimen name="shifting_no_title_icon_height">32dp</dimen>
    <dimen name="shifting_no_title_icon_width">32dp</dimen>
    <dimen name="shifting_height_bottom_padding_inactive">16dp
    </dimen><!-- not used because in inactive state text-view will be hidden and for icon top padding would be enough -->
    <dimen name="shifting_height_bottom_padding_active">10dp</dimen>
    <dimen name="shifting_height_top_padding_active">0dp
    </dimen><!-- 6(Top padding) - 12/2(extra padding due to badges) = 0 -->
    <dimen name="shifting_height_top_padding_inactive">10dp
    </dimen><!-- 56(total) - 24(icon) - 16(bottom padding inactive) = 16 ||| 16 - 12/2(extra padding due to badges)  = 10-->

    <dimen name="shifting_label">14sp</dimen>


    <dimen name="shifting_icon_grid">24dp</dimen>
    <dimen name="shifting_icon_badge_grid_height">36dp</dimen>
    <dimen name="shifting_icon_badge_grid_width">48dp</dimen>

    <dimen name="bottom_navigation_elevation">8dp</dimen>
    <dimen name="bottom_navigation_height">56dp</dimen>
    <dimen name="bottom_navigation_padded_height">64dp</dimen>
    <dimen name="bottom_navigation_top_margin_correction">-8dp</dimen><!-- 64 - 56 = 8 -->

    <dimen name="badge_text_size">12sp</dimen><!-- 10 -->
    //
    <dimen name="badge_corner_radius">13dp</dimen><!-- 15 -->
    <dimen name="badge_width_padding">4dp</dimen><!-- 4 -->
    <dimen name="badge_height_padding">1dp</dimen><!-- 1 -->
    <dimen name="badge_top_margin">2dp</dimen><!-- 2 -->
</resources>

四个fragment和相应的layout文件没有做处理，就不贴出来了，更多详细的使用方法可以查阅下面的github地址。

https://github.com/Ashok-Varma/BottomNavigation