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.

Certifiable

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

Surge

what will it be if i want to add it below the string. – Officious

@Officious Please share if you were able to add text below icon. thanks. – Playboy

Please edit your answer to set the myDrawable. It works well. – Sip

@Surge I want to add Image in Title Tab from URL. Any Hints? – Flinders

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... – Canaanite

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.... – Plossl

@MatthewHousser did you figure it out? i am having the same issue. I have used a 30dp drawable but no luck. – Gavrila

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.

Execrate

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 #31260884 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? – Lenna