how to change selected tab icon?

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.

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;
        }
    }

}

Santanu Sur Santanu Sur · Accepted Answer · 2018-02-24T11:42:29

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) {

        }
    });

how to change selected tab icon?

3 Answers

Perform the following steps respectively.%100 Exact solution