Display Tabbed Icons FragmentPagerAdapter

Question

This example is created in Xamarin using C #, if you know the answer in Java, I can also convert it to C #

I use the FragmentPagerAdapter to display three different snippets as tabs. I can display some text in the tab headers as follows:

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

This works fine: I see three tabs with the names Tab: 0 , Tab: 1 and Tab: 2 .

Now I want to replace the text with some icons. I am trying to do this the same way as with PagerSlidingTabStrip using SpannableString and 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; } 

Unfortunately, now I see three times [icon] as headings. Icons don't seem to be added to headings at all.

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

Answer 1

By default, the tab created by TabLayout sets the textAllCaps property to 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> 

You can then add the MyCustomTabLayout style to your TabLayout as follows:

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

Answer 2

Just Like Youp Said we have to apply this style as

 style="@style/MyCustomTabLayout" 

but not

 android:textAppearance="@style/MyCustomTabLayout" 

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