Icons in TabLayout

Question

I have a simple AppCompatActivity with one simple Toolbar (android.support.v7.widget.Toolbar), one Design-Library TabLayout and one ViewPager.

Now I have in this case 4 fragments which are inside the viewpager and can be swiped from the sides. That works fine. But as soon as I use mTabLayout.setupWithViewPager(mViewPager);, the icons disappear but I can tab on the empty spaces which works fine. If I remove the line, the icons are visible again, the "swipe" works but if I tab to an icon, nothing happens.

My Code

MainActivity

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private ViewPagerAdapter mAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initToolbar();
        initTabLayout();
        initViewPager();

        mTabLayout.setupWithViewPager(mViewPager);//Here is the code from above
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

    }

    private void initToolbar() {
        mToolbar = (Toolbar) findViewById(R.id.app_bar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);

    }

    private void initTabLayout() {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_fire_white));
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_apps_white));
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_account_plus_white));
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_help_white));

    }

    private void initViewPager() {
        mAdapter = new ViewPagerAdapter(getSupportFragmentManager(), MainActivity.this);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.setAdapter(mAdapter);

    }

    //MENUE STUFF

}

//ViewPagerAdapter
class ViewPagerAdapter extends FragmentStatePagerAdapter {

    public static final int TABS_COUNT = 4;
    private Context context;

    public ViewPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: return new HomeFragment1();
            case 1: return new HomeFragment2();
            case 2: return new HomeFragment3();
            case 3: return new HomeFragment4();
        }
        return null;
    }

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

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Answer 1

setupWithViewPager() instantiate Tab that only have the title provided from the ViewPager.Adapter. Of course you can override this method to something like this:

public class IconicTabLayout extends TabLayout {

    private TabViewProvider mTabViewProvider;

    public interface TabViewProvider {
        Tab newTabInstance(int tabPosition);
    }

    public IconicTabLayout(Context context) {
        super(context);
    }

    public IconicTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public IconicTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setTabProvider(TabViewProvider provider){
        mTabViewProvider = provider;
    }

    @Override
    public void setupWithViewPager(ViewPager viewPager) {
        PagerAdapter adapter = viewPager.getAdapter();
        if (adapter == null) {
            throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
        } else {
            this.setTabsFromPagerAdapter(adapter);
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(this));
            this.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
        }

    }

    @Override
    public void setTabsFromPagerAdapter(PagerAdapter adapter) {
        removeAllTabs();
        mTabViewProvider = mTabViewProvider == null && adapter instanceof TabViewProvider? (TabViewProvider)adapter : null;
  if(mTabViewProvider == null){   
        super.setTabsFromPagerAdapter(adapter);
    }else{
        for (int i = 0, count = adapter.getCount(); i < count; ++i) {
            this.addTab(mTabViewProvider.newTabInstance(i));
        }

    }
   }
}

Usage:

 mIconicTabLayout.setTabProvider(new TabViewProvider() {
        @Override
        public Tab newTabInstance(int tabPosition) {
            return mIconicTabLayout.newTab().setIcon(icons[position]);
        }
    });
    mIconicTabLayout.setupWithViewPager(mViewPager);

Or

class ViewPagerAdapter extends FragmentStatePagerAdapter implements TabViewProvider{

   public void setTabLayout(TabLayout t){
      mTabLayout = t;
   }
  //...

    @Override
    public Tab newTabInstance(int position) {
                return mTabLayout.newTab().setIcon(icons[position]);
            }

}

Note: Make sure you first call setTabProvider method or your PagerAdapter implement TabViewProvider, otherwise it will call default implementation.

Answer 2

Another approach is to not call setupWithViewPager(). Instead you can hold List of the Tabs, and use the PagerListener to select the right Tab.

Something like this:

private List<TabLayout.Tab> tabList;

private void initTabLayout() {
    tabList = new ArrayList<>();
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_fire_white));
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_apps_white));
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_account_plus_white));
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_help_white));
    for (TabLayout.Tab tab : tabList){
        mTabLayout.addTab(tab);
    }
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            tabList.get(position).select();
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

}

Answer 3

You should initiate and add the icons inside the PagerAdapter.

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

Source