效果如下：

device-2017-12-22-234223.png

device-2017-12-22-234149.png

代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    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"
    android:background="@color/md_blue_500"
    android:fitsSystemWindows="true">

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/toubuju"
        app:menu="@menu/shiyan"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                     android:id="@+id/frame"
                     android:layout_width="match_parent"
                     android:layout_height="0dp"
                     android:layout_weight="1"
                     android:background="@color/white">
            <android.support.design.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:android="http://schemas.android.com/apk/res/android">

                <android.support.design.widget.AppBarLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/tool"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:navigationIcon="@mipmap/ic_drawer_home"
                        app:title="首頁"/>

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tablayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        />
                </android.support.design.widget.AppBarLayout>

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"
                    />
            </android.support.design.widget.CoordinatorLayout>
        </FrameLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:itemBackground="@color/colorRateRed"
            app:menu="@menu/bottom_navigation_menu"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

public class ShiYan extends AppCompatActivity {
    @BindView(R.id.bottom)
    BottomNavigationView bottomNavigationView;
    @BindView(R.id.tool)
    Toolbar toolbar;
    @BindView(R.id.tablayout)
    TabLayout tabLayout;
    @BindView(R.id.viewpager)
    ViewPager viewPager;
    private List<View> list;
    private String[] s = {"第一個", "第二個", "第三個"};

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.shiyan);
        ButterKnife.bind(this);
        BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
        toolbar.inflateMenu(R.menu.shiyan);
        tabLayout.addTab(tabLayout.newTab().setText("第一個"));
        tabLayout.addTab(tabLayout.newTab().setText("第二個"));
        tabLayout.addTab(tabLayout.newTab().setText("第三個"));
        list = new ArrayList<>();
        list.add(View.inflate(ShiYan.this, R.layout.viewpager, null));
        list.add(View.inflate(ShiYan.this, R.layout.viewpager, null));
        list.add(View.inflate(ShiYan.this, R.layout.viewpager, null));
        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return list.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(list.get(position));
                return list.get(position);
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        });
        //tlTabs.setupWithViewPager方法內部會remove所有的tabs上的text翩伪，這里重新設置一遍tabs的text咐低，否則tabs的text不顯示
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < s.length; i++) {
            tabLayout.getTabAt(i).setText(s[i]);
        }
    }

}