CODEWITHSUNDEEP
androidtabsxamarin
MarcoK
MarcoK

Reputation: 6110

Display icons on FragmentPagerAdapter tabs

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!

Upvotes: 6

Views: 5385

Answers (2)

Youp Hulsebos
Youp Hulsebos

Reputation: 186

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" />

Upvotes: 13

Amalan Dhananjayan
Amalan Dhananjayan

Reputation: 2287

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

Upvotes: 0

Related Questions