First

首先我们需要导入以下依赖

implementation 'com.android.support:design:28.0.0'

一般使用时我们会和Viewpager一起使用，看一下xml里面的内容：

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

<android.support.design.widget.TabLayout
       android:id="@+id/tb"
       android:layout_weight="1"
       android:layout_height="0dp"
       android:layout_width="match_parent"
//初始化tablelayout文字颜色
   app:tabTextColor="@android:color/black" 
 //点击tablelayout文字颜色   
   app:tabSelectedTextColor="@android:color/holo_red_light">
 </android.support.design.widget.TabLayout>

然后就在我们的Activity中使用就好啦，初始化什么的就不说了都懂主要看一下具体使用我把她们放在数组里啦 啦啦啦

        fragments = new ArrayList<>();
        fragments.add(new RecommendFragment());
        fragments.add(new VideoFragment());
        fragments.add(new SpecialFragment());
        fragments.add(new MineFragment());

        titles = new String[]{"推荐", "视频", "专题", "我"};

        binding.tbMenu.setupWithViewPager(binding.vp);
        HomeActivityAdapter homeActivityAdapter = new HomeActivityAdapter(getSupportFragmentManager(), fragments, titles);
        binding.vp.setAdapter(homeActivityAdapter);

  final int picNormal[] = {R.drawable.ic_tab_vector_recommend_normal, R.drawable.ic_tab_vector_video_normal, R.drawable.ic_tab_vector_special_normal, R.drawable.ic_tab_vector_mine_norma}; 
 final int picSelect[] = {R.drawable.ic_tab_vector_recommend_select, R.drawable.ic_tab_vector_video_select, R.drawable.ic_tab_vector_special_select, R.drawable.ic_tab_vector_mine_select};

然后最最重要的一步啦，就是我们要让Tablayout 绑定Viewpager

tb.setupWithViewPager(vp);
然后呢 我需要实现点击每一个Tablayout可以变颜色啦，那么就需要使用一个监听事件

//设置默认图标

        binding.tbMenu.getTabAt(0).setIcon(picNormal[0]);
        binding.tbMenu.getTabAt(1).setIcon(picNormal[1]);
        binding.tbMenu.getTabAt(2).setIcon(picNormal[2]);
        binding.tbMenu.getTabAt(3).setIcon(picNormal[3]);


tb.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
//禁止table layout效果
    public void onTabSelected(TabLayout.Tab tab) {
binding.tbMenu.getTabAt(tab.getPosition()).setIcon(picSelect[tab.getPosition()]);

    }
//点击table layout效果
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
       binding.tbMenu.getTabAt(tab.getPosition()).setIcon(picNormal[tab.getPosition()]);
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

好啦就是如此的简单给各位看一下效果图

Second

在drawer文件夹中

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/theme" android:state_checked="true" />
    <item android:color="@color/normal_color" android:state_checked="false" />
</selector>

在meun文件夹中

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:checked="true"
        android:icon="@mipmap/home"
        android:title="@string/tab_1" />
    <item
        android:id="@+id/menu_project"
        android:icon="@mipmap/project"
        android:title="@string/tab_2" />
    <item
        android:id="@+id/menu_square"
        android:icon="@mipmap/square"
        android:title="@string/tab_3" />
    <item
        android:id="@+id/menu_official_account"
        android:icon="@mipmap/official_account"
        android:title="@string/tab_4" />
    <item
        android:id="@+id/menu_mine"
        android:icon="@mipmap/mine"
        android:title="@string/tab_5" />
</menu>