如何更改选中的标签图标？

Question

in my app i want to change to selected tab's icon.

I have a icons that selected and their unselected. When i select a tab it replace with selected icon.

And also change tabcolor as you seen in pic. same color as selected tab's icons.

![unselected for tab icon center][]

![selected for tab icon center][]

my question is how can i do this ? any advice or sample code please ?

here is my tablayout code

public class HomeActivity extends BaseActivity {

    /**
     * Activity class name holder variable
     */
    private static final String CLASS_NAME = HomeActivity.class.getSimpleName();
    /**
     * Variables
     */
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected int getLayoutResourceId() {
        return R.layout.activity_home;
    }

    @Override
    protected Activity getActivity() {
        return this;
    }

    @Override
    protected void initView() {

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        setupTabIcons();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
    }


    @Override
    protected void onPause() {
        super.onPause();
        JZVideoPlayer.releaseAllVideos();
    }


    @Override
    public void onBackPressed() {

        if(JZVideoPlayer.backPress()){
            return;
        }
        super.onBackPressed();
    }

    private void setupTabIcons() {
        int[] tabIcons = {
                R.drawable.menu_join,
                R.drawable.menu_rate,
                R.drawable.menu_winners
        };

        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new JoinFragment(),  "join");
        adapter.addFrag(new RateFragment(),  "rate");
        adapter.addFrag(new WinnerFragment(),"winner");
        viewPager.setAdapter(adapter);
    }



    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

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

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

        public void addFrag(Fragment fragment,String title){
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // return null to display only the icon
            return null;
        }
    }

}

Answer 1

Keep two icons in the drawable/mipmap .

• one for tab selected icon
• and the other for tab unselected icon... (R.drawable.green for selection) , (R.drawable.blackfor unselection)

If you have 3 icons , you need total 6

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() 
      {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            switch (tab.getPosition())
            {

                case 0:
                    tab.setIcon(R.drawable.green);
                    tabLayout.getTabAt(1).setIcon(R.drawable.black);
                    tabLayout.getTabAt(2).setIcon(R.drawable.black);

                    break;
                 case 1:
                    tab.setIcon(R.drawable.green);
                     tabLayout.getTabAt(2).setIcon(R.drawable.black);
                     tabLayout.getTabAt(0).setIcon(R.drawable.black);

                    break;
                 case 2:
                    tab.setIcon(R.drawable.green);
                     tabLayout.getTabAt(0).setIcon(R.drawable.black);
                     tabLayout.getTabAt(1).setIcon(R.drawable.black);
                    break;





            }



        }

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

        }

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

        }
    });

Answer 2

Perform the following steps respectively.%100 Exact solution

app/src/main/res/values/colors.xml (Add to colors.xml)

<color name="icon_enabled">#F3D65F</color>
<color name="icon_disabled">#FFFFFF</color>

app/src/main/res/color/custom_tab_icon.xml (Create a folder named color in res. Create a custom tab icon.xml in the folder.)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@color/icon_enabled" android:state_selected="true"/>
 <item android:color="@color/icon_disabled" android:state_selected="false"/>
</selector>

app/src/main/res/drawable/ic_action_settings.png (Create)

double click on action_settings to add

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="21.6"
android:viewportHeight="21.6"
android:tint="@color/custom_tab_icon">
<group android:translateX="-1.2"
  android:translateY="-1.2">
  <path
      android:fillColor="#FF000000"
 android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>
</group>
</vector>

Answer 3

First create a ColorStateList programmatically or on your resource selector_color_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorTabSelected" android:state_selected="true" />
    <item android:color="@color/colorTabUnselected" android:state_selected="false" />
</selector>

Create a method to tint a drawable from resource or drawable use this method

private Drawable tintDrawable(Context context, @DrawableRes int resId, ColorStateList stateList) {
    Drawable drawable = DrawableCompat.wrap(ContextCompat.getDrawable(context, resId)).mutate();
    DrawableCompat.setTintList(drawable, stateList);
    DrawableCompat.setTintMode(drawable, PorterDuff.Mode.SRC_IN);
    return drawable;
}

Then import your ColorStateList using this code

ColorStateList stateList = ContextCompat.getColorStateList(context, resId);

Then finally with a for loop change the icons of the tabs

    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tabAt = tabLayout.getTabAt(i);
        if (tabAt != null) {
            tabAt.setIcon(tintDrawable(this, tabIcons[i], stateList));
        }
    }

Optional:

If you want to add a tab selection listener simply register

tabLayout.addOnTabSelectedListener(..listener)

or use

viewPager.addOnPageChangeListener(..listener)