TabLayout Tab Title text in Lower Case

Question

I have used android.support.design.widget.TabLayout in my application with Min SDK 15.

By default it takes Tab title in capitals but I want it to make in "textCapsWord". I tried adding Style as suggested here and here. But unfortunate both doesn't work.

score 298 · Accepted Answer · edited Feb 02 '18 at 09:22

298

If you add the following line to your TabLayout it should work:

app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"

Use it like this:

<android.support.design.widget.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@android:color/white"
                    app:tabIndicatorHeight="2dp"
                    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                    app:tabSelectedTextColor="@android:color/white"
                    app:tabTextColor="@android:color/white" />

edited Feb 02 '18 at 09:22

Bruno Bieri

9,724
11
63
92

answered Oct 08 '15 at 12:34

Mustanser Iqbal

5,017
4
18
36

1

Hi, I have tried your code. It's works great but I have face issue with tab text. My tab text is some what lengthy so some part of the text is not visible. I am try to resize the text but not luck. When I remove your code and try tab text is modified according to our mentioned size. Please suggest what the cause. – Deepak Sep 21 '17 at 12:16
@Deepak try these commands app:tabMode="fixed" app:tabMode="scrollable" I am also using it and all the text is visible completely – Mustanser Iqbal Sep 21 '17 at 15:28
3

@MustanserIqbal by using `@android:style/TextAppearance.Widget.TabWidget` the text appears non all capital but the text is not bold anymore. Do you have any hint how to fix that or using some other style ONLY un-capitalise the letters? – Bruno Bieri Feb 02 '18 at 09:24
6

Fails on `com.google.android.material.tabs.TabLayout` – Farid Aug 10 '19 at 12:07

score 54 · Answer 2 · answered Jul 09 '18 at 10:48

You can just customize and make your title using below code,

 <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/colorLightPink"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/colorLightPink"
    app:tabTextAppearance="@style/CustomTextAppearanceTab"
    app:tabTextColor="@color/colorGreyDark" />

CustomTextAppearanceTab defines the text style which is written in style.xml file

<style name="CustomTextAppearanceTab" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
    <item name="android:textAllCaps">false</item>
</style>

score 15 · Answer 3 · answered May 11 '16 at 19:30

you can customize your tab title with color as well as Lower case by using below code

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    style="@style/customTabLayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tabHeight"
    android:background="@color/blurred_black"
    android:divider="@drawable/blue"
    android:stretchColumns="*"
    app:tabMode="fixed" />

customTabLayout is style which is written in style.xml file

<style name="customTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/default_back</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="textAllCaps">false</item>
    <item name="android:dividerPadding">3dp</item>
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/default_back</item>
    <item name="android:divider">@android:color/black</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabSelectedTextColor">@color/default_back</item>
</style>

Hope will help it out in other way.

score 4 · Answer 4 · answered Dec 05 '19 at 06:08

This Worked For Me...

<style name="TabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/TabTextAppearance</item>
</style>

<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
</style>

score 3 · Answer 5 · edited Aug 01 '21 at 22:37

This works for me perfectly.

      <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabContentStart="20dp"
        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabMode="scrollable">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="About" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Attractions" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Things To Do" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Best Time To Visit" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="How To Reach" />

    </com.google.android.material.tabs.TabLayout>

score 0 · Answer 6 · answered Nov 06 '21 at 05:42

We need to change the value of the attribute of tabTextAppearence in Tablayout.

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/white"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextAppearance="@android:style/TextAppearance"
        android:orientation="horizontal"
        app:tabSelectedTextColor="@color/green"
        app:tabTextColor="@color/grey_border">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/general" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/admin" />
    </com.google.android.material.tabs.TabLayout>

enter image description here

TabLayout Tab Title text in Lower Case

6 Answers6

Linked

Related