ViewPager与TabLayout使用带图标和文字的标题样式

我们经常使用ViewPager+TabLayout+Fragment的布局，大概是要完成下面这样一种布局：

1、首先看看xml相关布局，fragment_action.xml的相关内容

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <!-- 使用design提供的TabLayout app:tabPadding="14dp"-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_93"
            android:background="@color/white_ff"
            android:layout_marginBottom="@dimen/dp_1"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
            app:tabTextColor="@color/black_66"
            app:tabSelectedTextColor="@color/black_33"
            app:tabIndicatorHeight="@dimen/dp_2"
            app:tabIndicatorColor="@color/green_main"
            app:tabGravity="fill">

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

    <!--&lt;!&ndash; ViewPager里存放碎片的集合&ndash;&gt;-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_marginTop="@dimen/dp_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/tablayout" />

</android.support.constraint.ConstraintLayout>

2、再写一个ViewPagerAdapter的适配类ViewPagerAdapter

public class ViewPagerAdapter extends FragmentPagerAdapter {
   

    private List<Fragment> mList;   //fragment列表
    private List<String> titles;       //tab名的列表

    public ViewPagerAdapter(FragmentManager fm, List<Fragment> data, List<String> titles) {
        super(fm);
        this.mList = data;
        this.titles = titles;
    }


    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        //根据下标获取指定标题的名字
        return titles.get(position%mList.size());
    }
}

3、设置一些初始标题和图片以及放在ViewPager里面的Fragme