How to change TabLayout selected tab icon using ViewPager2

Question

I use FragmentStateAdapter , ViewPager2 , and com.google.android.material.tabs.TabLayout , and to set tab icon, I use com.google.android.material.tabs.TabLayoutMediator

TabLayoutMediator(
    mTabActivity.tabLayout,
    mTabActivity.viewPager,
    TabLayoutMediator.TabConfigurationStrategy { tab, position ->
        when (mTabEnums[position]) {
            TabType.TAB_CONTACT -> tab.setIcon(R.drawable.ic_tab_contact)
            TabType.TAB_GROUPS -> tab.setIcon(R.drawable.ic_tab_groups)
            TabType.TAB_MESSAGES -> tab.setIcon(R.drawable.ic_tab_message)
            TabType.TAB_MAPS -> tab.setIcon(R.drawable.ic_tab_map)
            TabType.TAB_RECENTS -> tab.setIcon(R.drawable.ic_tab_recent)
            TabType.TAB_INCALL_LIST -> tab.setIcon(R.drawable.ic_tab_contact)
            TabType.TAB_INCALL_MAPS -> tab.setIcon(R.drawable.ic_tab_map)
        }
    }
).attach() 

But how can I change icon of a selected tab?

I tried this, but mViewPager is a ViewPager2 not a ViewPager , and code does not compile.

mTabLayout.addOnTabSelectedListener(
      new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {

         @Override
         public void onTabSelected(TabLayout.Tab tab) {
            super.onTabSelected(tab);
            int tabIconColor = ContextCompat.getColor(
                    ActivityTab.this, R.color.colorPrimary);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
         }

         @Override
         public void onTabUnselected(TabLayout.Tab tab) {
            super.onTabUnselected(tab);
            int tabIconColor = ContextCompat.getColor(
                    ActivityTab.this, R.color.colorAccent);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
         }

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

Answer 1

This call back gives me the position of the selected tab

mTabLayout.setOnTabSelectedListener(new   TabLayout.BaseOnTabSelectedListener() {
     @Override
     public void onTabSelected(TabLayout.Tab tab) {
        Log.d(TAG,"selection "+tab.getPosition());
     }

     @Override
     public void onTabUnselected(TabLayout.Tab tab) {

     }

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

     }
  });

or in Kotlin

mTabActivity.tabLayout.addOnTabSelectedListener(object :
    TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        when (mTabEnums[tab.position])
        {
            TabType.TAB_CONTACT -> tab.icon =
                ContextCompat.getDrawable(mTabActivity,R.drawable.ic_tab_contact_green)
        }
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        when (mTabEnums[tab.position])
        {
            TabType.TAB_CONTACT -> tab.icon =
                ContextCompat.getDrawable(mTabActivity,R.drawable.ic_tab_contact)
        }
    }

    override fun onTabReselected(tab: TabLayout.Tab) {

    }

})

Answer 2

You can add app:tabIconColorTint in your Layout-XML:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorOnSurface" android:state_selected="true" />
    <item android:alpha="0.60" android:color="?attr/colorOnSurface" />
</selector>

Answer 3

TabLayout.setOnTabSelectedListener() and TabLayout.BaseOnTabSelectedListener is deprecated. Use this instead.

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

    @Override
    public void onTabSelected(@NonNull TabLayout.Tab tab) {
        // change icon here
    }

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

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

Also if you just want to change the tab icon tint. Consider using this instead of setting a color filter:

final int color = ContextCompat.getColor(context, R.color.myColor);
DrawableCompat.setTint(tab.getIcon(), color);