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!

Martinson

Perhaps you can do with fromHtml() – Glanville

Use Html.fromHtml() or if it doesn't works then create a custom layout for the tab. – Dystrophy

@SahilMunjal Html.fromHtml() no luck with this one too! – Martinson

Then you should use custom layout for the tab.. – Dystrophy

setText() on a TabLayout.Tab takes a CharSequence. If rich formatting via a SpannableString does not work, that feels like a bug in TabLayout. Please edit your question and provide a minimal reproducible example demonstrating how you attempted to set the text of the tabs. – Encapsulate

@Encapsulate Thanks for the suggestion and yes it seems like the bug with TabLayout. I have edited my question though! – Martinson

That code seems fine. You might create a sample project that reproduces the issue, then file a bug report, as I do not see an existing bug report for this problem. Tactically, as Sahil suggests, you may be able to use a custom view for the tab contents. – Encapsulate

@Encapsulate I just filed a bug to android. Thanks for the guidance. – Martinson

It's the TextAppearance style that's set by default on the tabs' TextViews that's causing that. If you don't want to use a custom View for the tabs, there's a way to set the TextAppearance on them that won't strip the spannable stuff. – Lavernelaverock

@MikeM. First of all thanks for the suggesting the way around. But I am suspecting that with TextAppearance either I can set the Large font or Small font size. Mine need to have both it's like title & sub-title. – Martinson

Nah, there's just a single attribute setting in the default TextAppearance style that causes the spannable info to be lost. If you use your own style with that set to false, your SpannableString will work as intended. – Lavernelaverock

@MikeM. Oh is it? but actually I am not aware of that attribute. tell me if you know it so that i can give it a try! thanks – Martinson

Sure. I'll post it when I get a chance here in a minute. – Lavernelaverock

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.

Lavernelaverock

Answer 2

Another approach is to use SpannableString text to TabLayout:

@Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        SpannableString sb = new SpannableString( tabTitles[position]);
        sb.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size
        sb.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color

        return sb;
    }

For more information check Add Icons+Text to TabLayout

Privatdocent

Answer 3

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.

Temperature