Design support library tabs with only icons

Question

I am using design support library to create tabs. By default it creates tabs with text. How can I create tabs with only icons? Also I want to change the icons color if it's current selected tab.

Answer 1

Use this to populate the viewPager:

public class SectionPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return mFragmentA;
            case 1:
                return mFragmentB;
            case 2:
                return mFragmentC;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return ""; // This removes the title, as you wish
    }
}

And then this in onCreateView:

final TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tab_layout);
final ViewPager viewPager = (ViewPager) v.findViewById(R.id.view_pager);

viewPager.setAdapter(new SectionPagerAdapter(getActivity().getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);

Also convenient to know:

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    int iconId = -1;
    switch (i) {
        case 0:
            iconId = R.drawable.icon1;
            break;
        case 1:
            iconId = R.drawable.icon2;
            break;
        case 2:
            iconId = R.drawable.icon3;
            break;
    }
    tabLayout.getTabAt(i).setIcon(iconId);
}

// Needed since support libraries version 23.0.0 
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
       tabLayout.getTabAt(position).select();
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

});

tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        super.onTabSelected(tab);
    }
});

And to change the selected tab color:

   tabLayout.setSelectedTabIndicatorColor(colorId); // For the line
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            tabLayout.getTabAt(i).getIcon().setTint(getResources().getColor(R.color.gray));
        }
        tabLayout.getTabAt(selectedTabPosition).getIcon().setTint(colorId);
    }

Answer 2

You can return empty titles in the view pager adapter,or in case you need to reuse the adapter just follow setting the icons by setting the titles to empty like this:

 for (int i = 0; i < mTabLayout.getTabCount(); i++) {
                    TabLayout.Tab tab = mTabLayout.getTabAt(i);
                    tab.setIcon(R.drawable.icon);
                    tab.setText("");
                }

Answer 3

There's no direct way I know of. But going through the documentation I noticed that you could set a Tab's icon with setIcon()

So maybe you do something like this:

for (int i = 0; i < mTabLayout.getTabCount(); i++) {
  mTabLayout.getTabAt(i).setIcon(R.drawable.icon);
}

You can also do the a setCustomView() on Tabs it seems. Do something like this:

for (int i = 0; i < mTabLayout.getTabCount(); i++) {
  View v = inflater.inflate(view, parent, false);
  ((ImageView) v).setImageResource(R.drawable.icon);
  mTabLayout.getTabAt(i).setCustomView(v);
}

Answer 4

You can get the "icon only" effect by using a SpannableString and adding an ImageSpan to it. See: How can i develop the PagerSlidingTabStrip with images in android?