android: How to add icons/drawables to the PagerTabStrip from the Android Support Lib version 4?

Question

android: How to add icons/drawables to the PagerTabStrip from the Android Support Lib version 4 ?

This is very specific question to people aware of the PagerTabStrip, I couldn't find enough examples anywhere, it's somehow new (The PagerTabStrip) so i couldn't find enough info.

score 54 · Accepted Answer · edited Jun 30 '14 at 22:37

54

You can easily add an icon/drawable to the PageTabStrip using SpannableString or SpannableStringBuilder.

For example, to display an icon before the text :

Drawable myDrawable; //Drawable you want to display

@Override
public CharSequence getPageTitle(int position) {

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

edited Jun 30 '14 at 22:37

rymo

3,285
2
36
40

answered Oct 11 '12 at 10:35

SteveR

2,496
1
24
23

what will it be if i want to add it below the string. – Vaibs Mar 18 '13 at 09:17
@Vaibs Please share if you were able to add text below icon. thanks. – iuq Jan 15 '14 at 11:02
1

Please edit your answer to set the myDrawable. It works well. – Sagar Devanga Jul 09 '15 at 13:01
@SteveR I want to add Image in Title Tab from URL. Any Hints? – GreenROBO Mar 10 '16 at 06:33
5

It just doesn't work for me! I'm using `Drawable drawable = ContextCompat.getDrawable(getActivity(), R.drawable.blah_icon);` to load my `Drawable`, and using the exact code above (which I've seen on other sites as well, seems like a common approach), I'm *only* seeing the text portion in the `PagerTabStrip`. Never my drawable. Really can't figure out why, everyone else seems to have no problem with it... – Matthew Housser Mar 11 '16 at 23:00
The flaw of this approach seems to be that the image was presented in the form of String (sort of speak). The height of the strip doesn't adjust accordingly, so the icon ended up clipped.... – Johnny Wu Oct 28 '17 at 01:36
1

@MatthewHousser did you figure it out? i am having the same issue. I have used a 30dp drawable but no luck. – Ahsan Aug 24 '18 at 01:37

score 3 · Answer 2 · answered May 03 '16 at 14:53

@MatthewHousser if the solution of SteveR doesn't work it may be because you set a fixed size in PagerTabStrip in your XML. This is what I had :

<android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="30dp">
</android.support.v4.view.PagerTabStrip>

This is what I have now :

<android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.v4.view.PagerTabStrip>

The image wasn't displayed in the first case, and is displayed in the second case. Hope it will help.

I am using TabLayout and want to show icons along with tab names like tab icons at the top and their text at below, there is this relevant thread to do this https://stackoverflow.com/questions/31260384/how-to-add-page-title-and-icon-in-android-fragmentpageradapter/31261273#31261273 which follows SteveR solution but it is not working in my case, I have tablayout height set as wrap_content already but it is still not working, so can you please help? — suv, Jul 16 '19 at 13:38

android: How to add icons/drawables to the PagerTabStrip from the Android Support Lib version 4?

2 Answers2

Linked