Tablayout with icons only

Question

I am using design support to create tabs. I am also using ViewPager for swipable tabs.

Now, I don\'t know how to use only icons instead of texts in tabs

Answer 1

The easiest way I've found to use icons is to use Tablayout.Tab.setIcon(drawable). This also makes it easy to highlight the selected icon. If you want to do this, follow these steps.

Step 1. Add your images to the res.mipmap folders. (mipmap-mdpi, hdpi etc.) Judging by the other answers here it's also fine to put then in the res.drawable folders.

Step 2. Call setIcon on all your tabs after setting up your TabLayout and ViewPager. I did this in my AdapterTabs to keep the Activity tidy. So in your activity do this:

    tablayout = (TabLayout) findViewById(R.id.tab_layout);
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    adapterTabs = new AdapterTabs(this, getSupportFragmentManager(), fragments, tablayout, viewPager);

    viewPager.setAdapter(adapterTabs);
    tablayout.setupWithViewPager(viewPager);
    adapterTabs.setTabIcons();

and in your AdapterTabs, which should extend FragmentPagerAdapter, put your setTabIcons() method.

    public void setTabTitlesToIcons() {
    Drawable icon1 = context.getResources().getDrawable(R.mipmap.ic_1);
    Drawable icon2 = context.getResources().getDrawable(R.mipmap.ic_2);
    Drawable icon3 = context.getResources().getDrawable(R.mipmap.ic_3);
    Drawable icon1Hilighted = context.getResources().getDrawable(R.mipmap.ic_1_selected);
    Drawable icon2Hilighted = context.getResources().getDrawable(R.mipmap.ic_2_selected);
    Drawable icon3Hilighted = context.getResources().getDrawable(R.mipmap.ic_3_selected);

    icons.add(icon1);
    icons.add(icon2);
    icons.add(icon3);
    iconsHilighted.add(icon1Hilighted);
    iconsHilighted.add(icon2Hilighted);
    iconsHilighted.add(icon3Hilighted);

    for(int i = 0; i < icons.size(); i++) {
        if(i == 0) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

Make sure to store a reference to the two lists 'icons' and 'iconsHilighted'. You'll need them later. Also store a reference to the TabLayout and the ViewPager which you passed in from the activity.

Step 3. Make sure AdapterTabs.getPageTitle() returns null. At this point, if you run it you should see that the first icon is highlighted.

Step 4. Implement ViewPager.OnPageChangeListener in AdapterTabs and add that listener to your viewPager

    public AdapterTabs(Context context, FragmentManager fragmentManager, List fragments, TabLayout tabLayout, ViewPager viewPager) {
    super(fragmentManager);
    this.context = context;
    this.tabLayout = tabLayout;
    this.viewPager = viewPager;
    this.viewPager.addOnPageChangeListener(this);

    tabs.add(fragments.get(0));
    tabs.add(fragments.get(1));
    tabs.add(fragments.get(2));
}

Step 5. Update the icons in the tabs in the onPageSelected callback in your AdapterTabs.

    @Override
public void onPageSelected(int position) {
    for (int i = 0; i < tabs.size(); i++) {
        if(i == position) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

Now you should see the hilighted icon being updated when you change tabs.