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.

Answer 1

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

Answer 2

@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.