how to change icon of tab when tab is selected tablayout

Question

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.tab_1,
            R.drawable.tab_2,
            R.drawable.tab_3,
            R.drawable.tab_4,
            R.drawable.tab_5,
            R.drawable.tab_6,
            R.drawable.tab_7,
            R.drawable.tab_8,
            R.drawable.tab_9,
            R.drawable.tab_10,
            R.drawable.tab_11,
            R.drawable.tab_12,
            R.drawable.tab_13,
            R.drawable.tab_14,
            R.drawable.tab_15,
            R.drawable.tab_16,
            R.drawable.tab_17


    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

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

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

    }




    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
        tabLayout.getTabAt(4).setIcon(tabIcons[4]);
        tabLayout.getTabAt(5).setIcon(tabIcons[5]);
        tabLayout.getTabAt(6).setIcon(tabIcons[6]);
        tabLayout.getTabAt(7).setIcon(tabIcons[7]);
        tabLayout.getTabAt(8).setIcon(tabIcons[8]);
        tabLayout.getTabAt(9).setIcon(tabIcons[9]);
        tabLayout.getTabAt(10).setIcon(tabIcons[10]);
        tabLayout.getTabAt(11).setIcon(tabIcons[11]);
        tabLayout.getTabAt(12).setIcon(tabIcons[12]);
        tabLayout.getTabAt(13).setIcon(tabIcons[13]);
        tabLayout.getTabAt(14).setIcon(tabIcons[14]);
        tabLayout.getTabAt(15).setIcon(tabIcons[15]);
        tabLayout.getTabAt(16).setIcon(tabIcons[16]);



    }





    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment());
        adapter.addFragment(new TwoFragment());
       // adapter.addFragment(new ThreeFragment(),"THREE");
        adapter.addFragment(new ThreeFragment());
        adapter.addFragment(new FourFragment());
        adapter.addFragment(new FiveFragment());
        adapter.addFragment(new SixFragment());
        adapter.addFragment(new SevenFragment());
        adapter.addFragment(new EightFragment());
        adapter.addFragment(new NineFragment());
        adapter.addFragment(new TenFragment());

        adapter.addFragment(new ElevenFragment());
        adapter.addFragment(new TwelveFragment());
        adapter.addFragment(new ThirteenFragment());
        adapter.addFragment(new FourteenFragment());
        adapter.addFragment(new FifteenFragment());
        adapter.addFragment(new SixteenFragment());
        adapter.addFragment(new SeventeenFragment());

        viewPager.setAdapter(adapter);


    }


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

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

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

        }


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

        public void addFragment(Fragment fragment) {
            mFragmentList.add(fragment);
           // mFragmentTitleList.add(title);
        }

       @Override
  public CharSequence getPageTitle(int position) {
       //return mFragmentTitleList.get(position);
           return  null;
   }
}


}

I want to change the icon of particular tab when specific tab is clicked or fragment is swiped

Answer 1

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

          tab.setIcon(tabIconsSelected[tab.getPosition()]);

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
        tab.setIcon(tabIconsUnSelected[tab.getPosition()]);
                }
            }

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

            }
        });

You can use this way.Simply change the icons when particular tab is clicked. tabIconsSelected and tabIconsUnSelected are int arrays containing id of specific image

Answer 2

You should use addOnPageChangeListener

Add a listener that will be invoked whenever the page changes or is incrementally scrolled.

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() 
 {
        public void onPageScrollStateChanged(int state) {
        }

        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        public void onPageSelected(int position) {
            Log.i("TAG", "position: " + position);
            switch (position) {
                case 0:
                     // CODE HERE
                     tabLayout.getTabAt(0).setIcon(tabIcons[0]);
                    break;
                case 1:
                    // CODE HERE
                     tabLayout.getTabAt(0).setIcon(tabIcons[1]);
                    break;
                case 2:
                    // CODE HERE
                    tabLayout.getTabAt(0).setIcon(tabIcons[2]);
                    break;
            }
        }
 });

Answer 3

create a selector for icons like this

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/icon_dashboard_active"/>
<item android:state_pressed="true" android:drawable="@drawable/icon_dashboard_active" />
<item android:drawable="@drawable/icon_dashboard" /> <!--<normal>-->

and for tab icons use this drawables instead of the ones you are using. Note: you will have to create a selector for all the icons you want to show as selected and deselected