首先先看效果图:

具体实现:

首先导入依赖包:

compile 'com.android.support:design:27.+'

布局文件:

<?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"
    android:orientation="vertical"
    tools:context="com.lsc.yumo.demo_1.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabBackground="@drawable/sp_bg"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="#02d"
        app:tabTextColor="#ccc">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/main_vp_content"
        android:isScrollContainer="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/main_tabLayout">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

其中Tablayout标签中的属性

        app:tabBackground="@drawable/sp_bg"//每一个item的背景
        app:tabIndicatorHeight="0dp"//下滑线设置为0 即隐藏下划线
        app:tabSelectedTextColor="#02d"//选中状态的item的字体颜色
        app:tabTextColor="#ccc"//默认状态下的item的字体颜色

java代码的实现:

public class MainActivity extends AppCompatActivity{

TabLayout mainTabLayout;
ViewPager mainViewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainViewPager = findViewById(R.id.main_vp_content);
        mainTabLayout = findViewById(R.id.main_tabLayout);
        initViewPager();
    }
    public void initViewPager(){
        mainViewPager.setAdapter(new VpAdapter(getSupportFragmentManager()));
        //注释掉的代码可以实现滑动 但是不能实现点击的自动跳转的效果
//        mainViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
//            @Override
//            public void onPageSelected(int position) {
//                mainTabLayout.getTabAt(position).select();
//            }
//        });
        //Tablayout 与 viewPager 进行绑定
        mainTabLayout.setupWithViewPager(mainViewPager);
        //由于绑定后 标签的标题和图片都会消失 所以在绑定玩完成后需要对标签进行赋值
        //设置title
        mainTabLayout.getTabAt(0).setText("商品");
        mainTabLayout.getTabAt(1).setText("分类");
        mainTabLayout.getTabAt(2).setText("购物");
        mainTabLayout.getTabAt(3).setText("我的");
        //设置图片 由于图片的选中和未选中状态不一致 所以需要为每张图片在drawable目录下新建一个xml文件
        //用于区分选中和默认的显示状态 然后把xml文件赋值给每一个item
        mainTabLayout.getTabAt(0).setIcon(R.drawable.goods);
        mainTabLayout.getTabAt(1).setIcon(R.drawable.classification);
        mainTabLayout.getTabAt(2).setIcon(R.drawable.shopping_cart);
        mainTabLayout.getTabAt(3).setIcon(R.drawable.mine);
    }
}

ViewPager的适配器VpAdapter

public class VpAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        if (position == 0){
            return new GoodsFragment();
        }else if (position == 1){
            return  new ClassificationFragment();
        }else if (position == 2){
            return  new ShoppingCartFragment();
        }else if (position == 3){
            return  new MineFragment();
        }

        return new GoodsFragment();
    }

    @Override
    public int getCount() {
        return 4;
    }
}

示例中fragment的代码很简单 在实际项目中按需求填写即可.