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!
↳ android.text.SpannableString. This is the class for text whose content is immutable but to which markup objects can be attached and detached.
In Android TabLayout is a new element introduced in Design Support library. It provides horizontal layout to display tabs on the screen. We can display more screens in a single screen using tabs. We can quickly swipe between the tabs.
TabLayout
's default style for its TextView
s 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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With