Tablayout with icons only

Question

I use design support to create tabs. I also use ViewPager for custom tabs.

Now I do not know how to use only icons instead of texts in tabs. I tried to find out, but did not get any success.

My code is:

 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 to customize the icons after the 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 appropriate section below.

Add Badges to TabLayout

The TabLayout class does not currently provide a clean abstraction model that allows the use of tab icons. There are many common workarounds, one of which is to return a SpannableString containing your icon in ImageSpan from your getPageTitle (position) PagerAdapter 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 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> 

Answer 3

The new version of TabLayout adds google TabItem , which can easily add an icon through your XML using the 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> 

More details here .

Answer 4

try it

  public class GlobalActivity extends AppCompatActivity { Toolbar toolbar; ViewPager viewPager; TabLayout tabLayout; ViewPagerAdapter adapter; private int[] tabIcons = { R.drawable.home_ic, R.drawable.biz_ic, R.drawable.network_ic, R.drawable.offers_ic, R.drawable.message_ic_b }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_global_hub); tab(); } public void tab(){ viewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.tablayout); 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]); } public void setupViewPager(ViewPager viewPager){ adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFrag(new GlHubFragment(),"HOME"); adapter.addFrag(new BizForumFragment(), "BIZ FORUM"); adapter.addFrag(new NetworkFragment(), "NETWORK"); adapter.addFrag(new MessagesFragment(), "MESSAGEs"); adapter.addFrag(new OfferFragmentActivity(), "OFFER"); viewPager.setAdapter(adapter); } public 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 addFrag(Fragment fragment,String title){ mfragmentlist.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position){ return mFragmentTitleList.get(position); } } } 

Answer 5

The easiest way I found using icons is to use Tablayout.Tab.setIcon (drawable). It also makes it easier 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 is also great to put then in the res.drawable folders.

Step 2. Call setIcon on all tabs after setting TabLayout and ViewPager. I did this in my AdapterTabs to keep the activity in order. Therefore, in your activity, do the following:

  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 the 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)); } } } 

Be sure to save the link to the icons of the two lists and the "Yellow" icons. You will need them later. Also keep a link to the TabLayout and ViewPager that you passed from the action.

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

Step 4. Deploy ViewPager.OnPageChangeListener in AdapterTabs and add this 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 tabbed icons in the onPageSelected callback in 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)); } } } 

You should now see an updated image when you change the tabs.

Answer 6

None of these methods are elegant when using TabLayout as the scenery script for the ViewPager. TabLayout Documentation Here is a simple TabLayout and PagerAdapter extension that provides a simple TabLayout replacement that can be used in any scenario without manually adding icons outside the TabLayout class and following using the PagerAdapter to get tab information.

 /** * Created by JDL on 1/18/2017. */ public class TabLayoutExt extends TabLayout { protected ViewPager mViewPager; public abstract static class TabLayoutViewPagerAdapter extends PagerAdapter { public TabLayoutViewPagerAdapter() { } /** * This method may be called by the TabLayout to obtain an icon drawable * to for the specified tab. This method may return null * indicating no tab icon for this page. The default implementation returns * null. * * @param position The position of the title requested * @return A drawable icon for the requested page */ public Drawable getPageIcon(Context context, int position) { return null; } } public TabLayoutExt(Context context) { super(context); } public TabLayoutExt(Context context, AttributeSet attrs) { super(context, attrs); } public TabLayoutExt(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onAttachedToWindow() { //Cover the implicit setup in TabLayout if (mViewPager == null) { final ViewParent vp = getParent(); if (vp instanceof ViewPager) { mViewPager = (ViewPager)vp; } } super.onAttachedToWindow(); } public void addTab(@NonNull Tab tab, int position, boolean setSelected) { if (mViewPager != null && mViewPager.getAdapter() instanceof TabLayoutViewPagerAdapter) { Drawable icon = ((TabLayoutViewPagerAdapter) mViewPager.getAdapter()).getPageIcon(getContext(),position); tab.setIcon(icon); } super.addTab(tab,position,setSelected); } @Override public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) { mViewPager = viewPager; super.setupWithViewPager(viewPager, autoRefresh); } } 

So all you have to do is extend TabLayoutViewPagerAdapter instead of PageAdapter and embed getPageIcon(Context,int) instead or in addition to the header. Drop TabLayoutExt in your XML file instead of the usual TabLayout . This can be expanded to further modify the tab, either with a custom view or with something else.

Answer 7

In TabLayout setup icon is simple:

getPageTitle(position) should return null (if you do not want the name to be displayed).

Further:

 tabLayout.getTabAt(0).setIcon(resId); tabLayout.getTabAt(1).setIcon(resId); ...... 

Answer 8

Try this, it will definitely work.

 private TabLayout tabLayout; private ViewPager viewPager; private int[] tabIcons = { R.drawable.single, R.drawable.multiple}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_contact_picker); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Choose contact"); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); tab(); } public void tab(){ 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]); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new Login()); adapter.addFragment(new Register()); viewPager.setAdapter(adapter); } class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); public ViewPagerAdapter(FragmentManager manager) { super(manager); } @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); } } 

Answer 9

The easiest way is to create a new table by setting the icon on the tablayout. below code will create two tabs with only icon. use this code for onCreate () method

  tablayout = (TabLayout) findViewById(R.id.order_tablayout); tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_shopping_cart_white_24dp)) ); tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_like2_fille_white_24dp)) ); 

Answer 10

As mentioned in the comments, icon definition in TabLayout does not work when using the 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 layout.xml add your icons to 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 customize TabLayout using ViewPager.

 tab_layout.setupWithViewPagerAndKeepIcons(view_pager) 

Answer 11

With the TabLayout provided by the Material Component Library , you can use:

• setIcon method to determine the resource identifier
• setTabLabelVisibility method to set 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 12

This is not the best answer for all cases, but what I found has not yet solved my problem.

Looking at the Androids implementation tabLayout.setupWithViewPager(ViewPager pager) , I came up with a solution using only listeners.

Layout Structure:

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

Code for 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) { } }); 

Look at the call to tabLayout.setScrollPosition inside OnPageChangeListener.onPageScrolled for more or less good indicator movement during scrolling.

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

Hello