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

In new version of TabLayout, google added TabItem which easily can add Icon through your XML with following code:

<android.support.design.widget.TabLayout
         app:tabTextColor="@color/gray"
         app:tabMode="fixed"
         app:tabBackground="@color/red"
         app:tabIndicatorHeight="4dp"
         app:tabIndicatorColor="@color/purple"
         app:tabPadding="2dp"
         app:tabSelectedTextColor="@color/white"
         app:tabMinWidth="64dp"
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <!--add height and width to TabItem -->
     <android.support.design.widget.TabItem 
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

See more here.

Answer 2

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<Fragment> 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.

Answer 3

One approach is setting the icons after TabLayout.setupWithViewPager() method.

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

Answer 4

This may not be the best answer for all cases, but what I found did not solve my problem yet.

After having a look at Androids implementation of tabLayout.setupWithViewPager(ViewPager pager) I came up with a solution using just listeners.

The layout structure:

| LinearLayout (vertical)
|-- TabLayout (width: match_parent)
|---- TabItem (without text, just icons)
|---- TabItem
|---- ...
|-- ViewPager

Code for the both listeners:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        pager.setCurrentItem(tab.getPosition());
    }

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

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        tabLayout.setScrollPosition(position, positionOffset, false);
    }

    @Override
    public void onPageSelected(int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        if (tab != null) {
            tab.select();
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

Have a look at the tabLayout.setScrollPosition call inside OnPageChangeListener.onPageScrolled for the more or less good moving of the indicator while scrolling.

This may not work if the TabLayout's width is not set to match_parent (or must be scrollable).

Answer 5

With the TabLayout provided by the Material Components Library you can use:

• the method setIcon to define the resourceId
• the method setTabLabelVisibility to set the TAB_LABEL_VISIBILITY_UNLABELED.

Something like:

for (int i=0;i<tabLayout.getTabCount();i++){

   tabLayout.getTabAt(i).setIcon(iconResId);
   tabLayout.getTabAt(i).
        setTabLabelVisibility(TabLayout.TAB_LABEL_VISIBILITY_UNLABELED);
}

Answer 6

As mentioned in the comments, defining the icons in the TabLayout does not work when using a PagerAdapter. For those using Kotlin, one workaround is to create an extension function like this:

fun TabLayout.setupWithViewPagerAndKeepIcons(viewPager : ViewPager?) {
    val icons =  mutableListOf<Drawable?>()
    repeat(tabCount) {
        icons.add(getTabAt(it)?.icon)
    }
    setupWithViewPager(viewPager)

    repeat(tabCount) {
        getTabAt(it)?.setIcon(icons.get(it))
    }
}

Then in the layout.xml add your icons to the TabLayout:

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout">

        <com.google.android.material.tabs.TabItem
                android:icon="@drawable/your_icon"/>

    </com.google.android.material.tabs.TabLayout>

Finally, use the extension function to setup the TabLayout with a ViewPager.

tab_layout.setupWithViewPagerAndKeepIcons(view_pager)