TabLayout使用自定义的图文布局，每个Tab设置不同的背景

效果

特点：
1、TabLayout使用setCustomView 实现带图标的tab；
2、每个Tab设置不同的背景；

1、页面布局：activity_main.xml

2、自定义Tab布局（左图右文字）：icon_view.xml

3、详细代码：

• getTabView()使用自定义布局；
• setTabBackground()设置不同背景；

@ContentView(R.layout.activity_main)
@ViewModel(MainViewModel.class)
public class MainActivity extends BaseActivity{
    private List myFragment;
    private String[] titleArr = {"待完成", "待提交", "主动检查"};
    private int[] selectedArr = {R.mipmap.icon_pending_selected, R.mipmap.icon_uncommit_selected, R.mipmap.icon_initiative_check_selected};
    private int[] unSelectedArr = {R.mipmap.icon_pending_unselected, R.mipmap.icon_uncommit_unselected, R.mipmap.icon_initiative_check_unselected};
    private final int DEFAULT_POSITION = 0;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initLayout();
    }

    /**
     * 导航栏布局：https://blog.csdn.net/xiaoshuxgh/article/details/80389570
     */
    private void initLayout() {
        myFragment = new ArrayList<>();
        myFragment.add(new PendingFragment());
        myFragment.add(new UnCommitFragment());
        myFragment.add(new InitiativeCheckFragment());

        mBinding.viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return myFragment.get(i);
            }

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

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titleArr[position];
            }
        });

        mBinding.tablayout.setupWithViewPager(mBinding.viewpager);

        // 注意：这个方法需要放在setupWithViewPager()后面
        for (int i = 0; i < mBinding.tablayout.getTabCount(); i++) {
            TabLayout.Tab tabView = mBinding.tablayout.getTabAt(i);
            tabView.setCustomView(getTabView(i));
            setTabBackground(tabView, false);
        }

        mBinding.tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //设置选中图标样式
                View tabView = tab.getCustomView();
                tabView.findViewById(R.id.tabicon).setBackgroundResource(selectedArr[tab.getPosition()]);

                //设置选中字体颜色
                TextView textView = tabView.findViewById(R.id.tabtext);
                textView.setTextColor(getResources().getColor(R.color.theme_color));
                setTabBackground(tab, true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //设置未选中图标样式
                View tabView = tab.getCustomView();
                tabView.findViewById(R.id.tabicon).setBackgroundResource(unSelectedArr[tab.getPosition()]);

                //设置未选中字体颜色
                TextView textView = tabView.findViewById(R.id.tabtext);
                textView.setTextColor(getResources().getColor(R.color.cl_666));
                setTabBackground(tab, false);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });

        setTabBackground(mBinding.tablayout.getTabAt(DEFAULT_POSITION), true);
    }

    /**
     * 使用自定义的View布局
     *
     * @param position
     * @return
     */
    private View getTabView(int position) {
        View v = LayoutInflater.from(mActivity).inflate(R.layout.icon_view, null);
        ImageView iv = v.findViewById(R.id.tabicon);
        TextView tv = v.findViewById(R.id.tabtext);

        tv.setText(titleArr[position]);
        //设置默认页面
        if (position == DEFAULT_POSITION) {
            iv.setBackgroundResource(selectedArr[position]);
            tv.setTextColor(v.getResources().getColor(R.color.theme_color));
        } else {
            iv.setBackgroundResource(unSelectedArr[position]);
            tv.setTextColor(v.getResources().getColor(R.color.cl_666));
        }
        return v;
    }

    /**
     * TabLayout每个Tab选中背景不一样。
     * https://blog.csdn.net/qq_32606467/article/details/103068611
     *
     * @param tab
     * @param selected
     */
    private void setTabBackground(TabLayout.Tab tab, boolean selected) {
        Drawable drawable = null;
        switch (tab.getPosition()) {
            case 0:
                if (selected) {
                    drawable = mActivity.getDrawable(R.drawable.tab_background_selected_0);
                } else {
                    drawable = mActivity.getDrawable(R.drawable.tab_background_unselected_0);
                }
                break;
            case 1:
                if (selected) {
                    drawable = mActivity.getDrawable(R.drawable.tab_background_selected_1);
                } else {
                    drawable = mActivity.getDrawable(R.drawable.tab_background_unselected_1);
                }
                break;
            case 2:
                if (selected) {
                    drawable = mActivity.getDrawable(R.drawable.tab_background_selected_2);
                } else {
                    drawable = mActivity.getDrawable(R.drawable.tab_background_unselected_2);
                }
                break;
        }

        ViewCompat.setBackground(tab.view, drawable);
    }
}