Display icons on FragmentPagerAdapter tabs

Question

This example is created in Xamarin using C#, if you know the answer in Java, I'll be able to convert it into C# too

I'm using the FragmentPagerAdapter to display three different Fragments as Tabs. I'm able to display some text in the Tab headers like this:

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    return new Java.Lang.String("Tab: " + position);
}

This works just fine: I'm seeing three tabs with titles Tab: 0, Tab: 1 and Tab: 2.

Now, I want to replace the text with some icons. I'm trying to do that the same was as with the PagerSlidingTabStrip, using a SpannableString & ImageSpan .

public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
{
    var image = Application.Context.Resources.GetDrawable(Resource.Drawable.icon);
    image.SetBounds(0, 0, image.IntrinsicWidth, image.IntrinsicHeight);

    var spannableString = new Android.Text.SpannableString("[icon]");
    var imageSpan = new Android.Text.Style.ImageSpan(image, Android.Text.Style.SpanAlign.Bottom);
    spannableString.SetSpan(imageSpan, 0, 1, Android.Text.SpanTypes.ExclusiveExclusive);
    return spannableString;
}

Sadly, what I'm seeing right now is three times [icon] as headers. It looks like as if the icons aren't added to the headers at all.

Am I doing something wrong here? Thanks for any help!

Youp Hulsebos · Accepted Answer · 2015-10-13T13:44:12.900

13

By default, the tab created by TabLayout sets the textAllCaps property to be true, which prevents ImageSpans from being rendered. You can override this behavior by changing the tabTextAppearance property.

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
      <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
      <item name="textAllCaps">false</item>
</style>

Then you can add the MyCustomTabLayout Style to your TabLayout like this:

<android.support.design.widget.TabLayout
 android:id="@+id/tabs"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 style="@style/MyCustomTabLayout" />

edited Oct 13 '15 at 13:44

answered Sep 25 '15 at 11:00

Youp Hulsebos

186
2
10

I tried this and applied the style to the Tablayout like this android:textAppearance="@style/MyCustomTabLayout" But it di not work I just got the '[icon]' String – Amalan Dhananjayan Oct 12 '15 at 09:34
You are right. You need to apply the style to the TabLayout. I wil edit my answer. – Youp Hulsebos Oct 13 '15 at 13:40
what the hell, OP asked for icons, and the answer is about the text, what is going on? – Zulqurnain Jutt Apr 26 '18 at 07:27

score 0 · Answer 2 · answered Oct 12 '15 at 10:30

0

Just Like Youp Said we have to apply the above style as

style="@style/MyCustomTabLayout"

but not

android:textAppearance="@style/MyCustomTabLayout"

Refer this for more information https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout

answered Oct 12 '15 at 10:30

Amalan Dhananjayan

2,277
1
34
47

Display icons on FragmentPagerAdapter tabs

2 Answers2

Linked