Making TabLayout text bold

Vahid Amiri picture Vahid Amiri · Feb 24, 2016 · Viewed 23.8k times · Source

I'm using the TabLayout from the Android Design Support library and want to style its text (title). Specifically making it bold. How to achieve that in XML only?

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" />

Answer

Vahid Amiri picture Vahid Amiri · Feb 25, 2016

First this must be added to the styles.xml:

<style name="TabLayoutTextStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

Even if you don't want to alter the text size, you must include it in the styles otherwise nothing will be shown.

Then the style must be applied to the TabLayout using app:tabTextAppearance not the style attribute!

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" 
app:tabTextAppearance="@style/TabLayoutTextStyle" />

To enable the allcaps you may add the following to the TabLayoutTextStyle:

<item name="android:textAllCaps">true</item>