is there any-way to use SpannableString in TabLayout?

Question

I want to set the title of the TabLayout with two different text sizes. Like the given image below. Or the other way around to achieve this!

I have tried with SpannableString like give below. This snippet is in the for loop till 5!

SpannableString mSpannableString=  new SpannableString(s);
mSpannableString.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size
mSpannableString.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color
mTabLayout.getTabAt(i).setText(mSpannableString);

But as mentioned by CommonaSware setText() is not taking the rich content!

Answer 1

TabLayout's default style for its TextViews uses a TextAppearance with the textAllCaps attribute set to true. The transformation method for this handles the CharSequence as a flat String, so any Spannable info is lost.

To prevent this, we can create a style for the TabLayout that disables textAllCaps. For example:

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

Setting this as the tabTextAppearance on the TabLayout will allow your SpannableString to work as expected.

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextAppearance="@style/TabTextAppearance" />

---

As mentioned in comments, using a custom View for the tabs is another option here, since that wouldn't have the problematic attribute setting by default.

Answer 2

Supplementary for Mike M. ´s Answer

I had the same issue but only in Lollipop and backwards , in Oreo it worked just fine before getting styled, fortunatelly Mike's answer solved it.

I was using Google Material TabLayout:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        app:tabTextAppearance="@style/TabTextAppearance"
        android:background="@color/colorDarkGreen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabBackground="@drawable/tab_color_selector_green">

</com.google.android.material.tabs.TabLayout>

At least, with this widget is not necessary to put styling if You are working for Oreo and on.