TabLayout and Viewpager - Replace text with images

Question

so I wanted a tablayout and a viewpager to be able to swipe through different fragments.

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_home, container, false);


    tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
    viewPager = (ViewPager) view.findViewById(R.id.viewPager);

    viewPagerAdapter = new ViewPagerAdapter(getFragmentManager());
    viewPagerAdapter.addFragments(new AFragment(), "Test1", getContext());
    viewPagerAdapter.addFragments(new BFragment(), "Test2", getContext());
    viewPagerAdapter.addFragments(new CFragment(), "Test3", getContext());

    viewPager.setAdapter(viewPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);

    return view;
}

And my ViewPagerAdapter class looks like this:

public class ViewPagerAdapter extends FragmentPagerAdapter {

ArrayList<Fragment> fragments = new ArrayList<>();
ArrayList<String> tabTitles = new ArrayList<>();
Context context;

public void addFragments(Fragment fragments, String titles, Context context) {
    this.fragments.add(fragments);
    this.tabTitles.add(titles);
    this.context = context;
}

public ViewPagerAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    return fragments.get(position);
}

@Override
public int getCount() {
    return fragments.size();
}

@Override
public CharSequence getPageTitle(int position) {
           return tabTitles.get(position);
}
}

So the adapter I set my viewPager to contains all the information such as the titles for my tabLayout and the amount of fragments. Is that correct?

So what I want to do now is replace the titles on my tabLayout with certain icons. Am I supposed to remove the String parameter in my ViewPagerAdapter constructor and delete my Arraylist or do I have to pass an empty String?

What code do I need to add to my ViewPageAdapter class in order to be able to add icons instead of the Strings to the layout? I found a possible solution here: How to add page title and icon in android FragmentPagerAdapter

So I changed my method to that:

@Override
public CharSequence getPageTitle(int position) {

    myDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mail_outline_black_24dp);
    SpannableStringBuilder sb = new SpannableStringBuilder(" Page #"+ position); // space added before text for convenience

    myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
    ImageSpan span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
    sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

    return sb;
}

That changed my titles to PAGE #0 #1 ... but didn't add the icon to my TabLayout. Thank you!

EDIT:

This works too. Still don't know what I did wrong though

tabLayout.getTabAt(i).setIcon();

score 1 · Answer 1 · answered Oct 01 '16 at 16:58

1

Please use this code for icon

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

answered Oct 01 '16 at 16:58

Ratnesh

65
9

Ratnesh · Answer 2 · 2016-10-01T13:20:56.670

0

Please replace this code will work

@Override public CharSequence getPageTitle(int position) {

    myDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mail_outline_black_24dp);
    title = tabTitles.get(position);
    SpannableStringBuilder sb = new SpannableStringBuilder("   " + title); // space added before text for convenience
    try {
        myDrawable.setBounds(5, 5, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
        ImageSpan span = new ImageSpan(myDrawable, DynamicDrawableSpan.ALIGN_BASELINE);
        sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    } catch (Exception e) {
        // TODO: handle exception
    }

tabTitles.set(position,sb); return tabTitles.get(position);

edited Oct 01 '16 at 13:20

answered Oct 01 '16 at 13:12

Ratnesh

65
9

still no icon to be seen. Is it maybe a size matter? – Sara Lince Oct 01 '16 at 13:18
Your method doesn't seem to have any impact. I changed it to ("123" + title) to check. And it's not using the new name '123' + title. My method had at least impact on the title. – Sara Lince Oct 01 '16 at 13:25
Please add this line tabTitles.set(position,sb); – Ratnesh Oct 01 '16 at 13:47
tabTitles.set method does not take a SpannableStringBuilder-object as 2nd argument. Takes a string instead. I tried tabTitles.set(position, title); but didnt help – Sara Lince Oct 01 '16 at 13:51

TabLayout and Viewpager - Replace text with images

2 Answers2