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. I tried finding out but didn't get any success.

My code:

Toolbar toolbar; private TabLayout tabLayout; private ViewPager viewPager;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     viewPager = (ViewPager) findViewById(R.id.pager);     setupViewPager(viewPager);     setupTablayout(); }  private void setupTablayout() {     tabLayout = (TabLayout) findViewById(R.id.tabLayout);     tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);     tabLayout.setupWithViewPager(viewPager); }  class MyPagerAdapter extends FragmentPagerAdapter {      private final List<Fragment> mFragmentList = new ArrayList<>();     private final List<String> mFragmentTitleList = new ArrayList<>();      public MyPagerAdapter(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) {         mFragmentTitleList.get(position)     } }  private void setupViewPager(ViewPager viewPager) {     MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());     adapter.addFrag(new frag(), "CAT");     adapter.addFrag(new frag(), "DOG");     adapter.addFrag(new frag(), "BIRD");     viewPager.setAdapter(adapter); } 

Answer 1

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 2

The tutorial shown in the following link should cover what you want. https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout#add-icons-to-tablayout

I copied the relevant section below.

Add Icons to TabLayout

Currently, the TabLayout class does not provide a clean abstraction model that allows for icons in your tab. There are many posted workarounds, one of which is to return a SpannableString, containing your icon in an ImageSpan, from your PagerAdapter's getPageTitle(position) method as shown in the code snippet below:

private int[] imageResId = {         R.drawable.ic_one,         R.drawable.ic_two,         R.drawable.ic_three };  // ...  @Override public CharSequence getPageTitle(int position) {     // Generate title based on item position     // return tabTitles[position];     Drawable image = context.getResources().getDrawable(imageResId[position]);     image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());     SpannableString sb = new SpannableString(" ");     ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);     sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);     return sb; } 

By default, the tab created by TabLayout sets the textAllCaps property to be true, which prevents ImageSpans from being rendered. You can override this behavior by changing the tabTextAppearance property.

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">         <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>   </style>    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">         <item name="textAllCaps">false</item>   </style>