CODEWITHSUNDEEP
androidandroid-tablayout
Vahid Amiri
Vahid Amiri

Reputation: 11117

Making TabLayout text bold

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" />

Upvotes: 18

Views: 34158

Answers (5)

Armin Haghighi
Armin Haghighi

Reputation: 66

You need to declare the following styles

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

Now you can just use it like:

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

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

Upvotes: 3

JPM
JPM

Reputation: 9296

This is the right way to do this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:baselineAligned="false">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabTextAppearance="@style/TextAppearance.Bold"
        app:tabTextColor="@color/grey"
        app:tabSelectedTextColor="@color/black" />

</LinearLayout>

Upvotes: 0

Udi Reshef
Udi Reshef

Reputation: 1283

  1. 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>

  2. 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>

Upvotes: 4

Vahid Amiri
Vahid Amiri

Reputation: 11117

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>

Upvotes: 51

Love Bdsobuj
Love Bdsobuj

Reputation: 53

Add TabLayout Text Style in styles.xml

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

And set TabLayoutTextStyle as style to yor TabLayout properties. 

<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" 
style="@style/TabLayoutTextStyle" />

Upvotes: 0

Related Questions