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" />
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>
One option is to add In styles.xml
<item name="android:textStyle">bold</item>
inside "TextAppearance.Design.Tab" with same name as parent
<style name="TextAppearance.Design.Tab" parent="TextAppearance.Design.Tab">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
<item name="android:singleLine">true</item>
</style>
Other option : inside your layout direct to your style - lets say you call it myTabLayoutStyle
style="@style/myTabLayoutStyle"
and inside that style redirect again to other style just for text appearance :
<item name="tabTextAppearance">@style/myTabTextStyle</item>
like that:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
style="@style/myTabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="600dp"
android:minHeight="?attr/actionBarSize"
app:tabGravity="fill"
android:singleLine="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
inside styles.xml:
<style name="myTabLayoutStyle" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">3dp</item>
<item name="tabPaddingEnd">3dp</item>
<item name="android:singleLine">true</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
<item name="tabTextAppearance">@style/myTabTextStyle</item>
</style>
<style name="myTabTextStyle">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
<item name="android:singleLine">true</item>
</style>
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