android:textAllCaps="false" not working for TabLayout design Support

Question

I have set android:textAllCaps="false" in my android.support.design.widget.TabLayout thought it is showing the Tab Title in All caps only.

How can I remove all caps?

I believe you have to define that in a specific style which inherits the base style for a TabLayout. — Vannen, Jul 08 '15 at 14:08
@Vannen can please show me some code which solve this issue? — Dhrumil Shah - dhuma1981, Jul 08 '15 at 14:35
please use editText.setFilters(new InputFilter[]{new InputFilter.AllCaps()}); — Dhiren Hamal, Feb 02 '17 at 06:07

score 217 · Accepted Answer · edited May 27 '16 at 16:21

217

UPDATE FOR DESIGN LIBRARY 23.2.0+

The original answer doesn't work with design library 23.2.0 or later. Thanks for @fahmad6 pointed out in comment, in case someone missed that comment, I'll put it here. You need to set both textAllCaps and android:textAllCaps to false to disable all capitalize setting.

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

ORIGINAL ANSWER

By default, tabs are created by TabLayout sets the textAllCaps property to be true, you have to define a style making this flag false.

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
      <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

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

edited May 27 '16 at 16:21

Kcvin

5,073
2
32
54

answered Jul 09 '15 at 06:45

Paresh Mayani

127,700
71
241
295

5

Your answer look correct but i don't know why, it not worked for me – Moinkhan Jul 09 '15 at 08:12
@Moinkhan I can't say anything without knowing what you have taken in layout and what code you have written! Look into the code and see if any mistake! – Paresh Mayani Jul 09 '15 at 08:20
I am just applying theme `MyCustomTabLayout` in TabLayout using `app:theme` . I don't think it's wrong... – Moinkhan Jul 09 '15 at 08:23
7

@Moinkhan It is working. Use this way style="@style/MyCustomTabLayout" – Dhrumil Shah - dhuma1981 Jul 09 '15 at 12:46
2

The important part here is that the answer is using `textAllCaps` whereas the question is using `android:textAllCaps`. – Fabian Frank Feb 10 '16 at 22:32
1

This solution stop working with appCompat 23.2.0. It's wotking with: `android:textAllCaps` – mtrakal Feb 29 '16 at 12:31
3

Interestingly, for reasons I can not explain, I had to explicitly add _both_ `android:textAllCaps` and `textAllCaps` and set them to false for my text to show up as desired (i.e. "Local" instead of "LOCAL"). Trying either alone did not do the trick. – fawaad Apr 08 '16 at 02:07
`false` has no impact on me. I only need `false`. Support lib 26.1.0. – AutonomousApps Dec 14 '17 at 20:11
1

It worked for me. You need to add tabTextAppearance attribute in your tab layout and reference it to MyCustomTextAppearance style. That's it! – brijexecon Jun 06 '18 at 07:48
Thanks, this works when you want to set `android:textSize` and `android:textAllCaps` (not an updated answer, but old one). – CoolMind Aug 02 '18 at 09:08
5

Update : It should be used as `app:tabTextAppearance="@style/MyCustomTextAppearance"` then it will work – Vidhi Dave Aug 26 '20 at 06:34
It also works for ` – rahat Jan 27 '21 at 10:07

score 92 · Answer 2 · edited Sep 08 '16 at 08:51

92

@Paresh Mayani answer is correct however you can create only tab style

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

And use it using

<android.support.design.widget.TabLayout
    app:tabTextAppearance="@style/MyCustomTextAppearance"
    .../>

edited Sep 08 '16 at 08:51

Muhammad Umair Shafique

2,475
1
30
39

answered Nov 02 '15 at 11:36

Ordon

2,835
1
15
7

2

@Muhammad Umair Shafique's solution is working. We have to use 'app:tabTextAppearance' atrribute instead of 'style' attribute. – thilina Kj Oct 04 '17 at 20:03
1

This seems to be a better answer than the accepted answer, as only 1 style is created. – Cheok Yan Cheng Apr 05 '18 at 17:23

score 47 · Answer 3 · edited Nov 07 '17 at 12:40

47

use this attribute app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget" It will work.

  <android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:tabGravity="fill"
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabMode="fixed"
    app:tabPaddingStart="0dp" />

edited Nov 07 '17 at 12:40

Aman Shekhar

2,719
1
18
29

answered Sep 26 '17 at 11:33

yousef

1,345
1
12
20

1

Only answer here that is pure xml all inside the view element - no need to add external style for this or do anything in Java. Nice - thanks – Gene Bo May 03 '18 at 20:01
Oh really, because this guy is good at copy&past?! Question is answered with the same solution just one answer above in this thread and that answer gives credit to the owner while this one poses as owner. Here is the answer just above this one https://stackoverflow.com/a/36191045/5636313 – Farid Aug 10 '19 at 11:59
i can't see this answer @Farid – yousef Jan 14 '20 at 10:01

score 42 · Answer 4 · edited May 23 '17 at 11:55

42

https://stackoverflow.com/a/34678235/1025379

<android.support.design.widget.TabLayout
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
/>

edited May 23 '17 at 11:55

Community

1
1

answered Mar 24 '16 at 00:07

Hun

3,652
35
72

2

Confirm, no other answers with more up-votes on this page did the trick for me but this one. My project has minSdkVersion=16, targetSdkVersion=26, Design library version 26.0.0-alpha1 and I'm using the `android.support.design.widget.TabLayout`. – Tom Ladek Aug 22 '17 at 09:31
1

Not working for `com.google.android.material.tabs.TabLayout` – Farid Aug 10 '19 at 11:47

CoolMind · Answer 5 · 2019-01-31T13:12:45.297

In my case two variants work:

1) By Bogdan (susemi99):

<android.support.design.widget.TabLayout
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
/>

2) By Paresh Mayani. I wanted to have android:textAllCaps="false" and android:textSize="15sp" simultaneously, so his old method works.

In styles.xml write (parent may vary, for instance, "@android:style/TextAppearance.Widget.TabWidget", "TextAppearance.Design.Tab"):

<style name="TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/color_blue</item>
    <item name="tabSelectedTextColor">@color/color_blue</item>
    <item name="tabTextColor">@color/black</item>
    <item name="tabTextAppearance">@style/TabLayoutTextAppearance</item>
</style>

<style name="TabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">15sp</item>
    <item name="textAllCaps">false</item>
    <item name="android:textAllCaps">false</item>
</style>

Apply this style in layout:

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/TabLayout"
    />

Evren Ozturk · Answer 6 · 2018-07-18T12:41:34.407

14

For those who can't get working other answers.

Defining a style is working fine when you have single line tab text. If you take a close look into the TabLayout, you'll see that it's using a field design_tab_text_size_2line when the tabs has more than one line.

The only way I could find to effect this field is to override it in your dimen file.

So put this in your values/dimens.xml

<dimen name="design_tab_text_size_2line" tools:override="true">10sp</dimen>

Hope it helps.

edited Jul 18 '18 at 12:41

answered Feb 14 '18 at 22:33

Evren Ozturk

918
2
19
39

1

Thank you this is working! Just a little thing I've noticed - when you pass the value as @dimen/10sp a compilation error is showing. You should just pass the sp you need without the "@dimen/" prefix (for example 10sp). – Slavi Petrov Jul 18 '18 at 06:46
Thx for the tip :) – Evren Ozturk Jul 18 '18 at 12:41
2

Good find @EvrenOzturk . Thumbs up for you. – ralphgabb Aug 07 '18 at 03:28
Great find!!!!! – coderBox Oct 11 '21 at 08:54

score 7 · Answer 7 · answered Apr 16 '21 at 11:14

7

This works for me in just one line

 <android.support.design.widget.TabLayout
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"/>

answered Apr 16 '21 at 11:14

Aalishan Ansari

641
6
8

score 5 · Answer 8 · answered Oct 06 '16 at 07:28

5

Here is simple solution....Enjoy

 for (int tabIndex = 0; tabIndex <tabLayout.getTabCount() ; tabIndex++) {
        TextView tabTextView = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(tabIndex)).getChildAt(1));
        tabTextView.setAllCaps(false);
    }

answered Oct 06 '16 at 07:28

Balaji Gaikwad

69
1
2

You're making a lot of assumptions about Tab's layout here. Any change of this layout in the library might break your code and it's going to crash. For example, the LinearLayout can change to something else, or the order of children can change. – Dimezis Mar 14 '22 at 12:20

score 3 · Answer 9 · answered Feb 15 '18 at 11:36

Try following method and you can implement all the methods of TextView in TabLayout

private void setCustomTab() {

    ViewGroup vg = (ViewGroup) mTabLayout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(ResourcesCompat.getFont(this,R.font.montserrat_medium));
                ((TextView) tabViewChild).setAllCaps(false);
            }
        }
    }
}

Hope it helps.

score 3 · Answer 10 · answered Aug 10 '18 at 12:18

3

Change: <item name="android:textAllCaps">false</item>

With: <item name="textAllCaps">false</item>

answered Aug 10 '18 at 12:18

Fidan Bacaj

408
5
10

score 3 · Answer 11 · answered Dec 05 '19 at 06:00

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 2 · Answer 12 · answered Jul 31 '15 at 15:26

In versions priror to 14, you need to set (as commented by Paresh Mayani):

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
  <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

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

But, in case of android version is equal or greater than 14, you need to set:

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

So, if you need to be compatible with versions before and after 14, you also need to create a folder values-v14, and a file styles.xml in that folder with the content:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
      <item name="android:textAllCaps">false</item>
    </style>
</resources>

ucMedia · Answer 13 · 2023-05-21T13:03:11.927

May 2023
Long story short (programmatically)...

Java:

/**
 * @param view Target TabLayout view
 * @param caps Present the text caps style
 */
public static void setAllCaps(View view, boolean caps) {
    if (view instanceof ViewGroup) {
        for (int i = 0; i < ((ViewGroup) view).getChildCount(); i++)
            setAllCaps(((ViewGroup) view).getChildAt(i),caps);
    } else if (view instanceof TextView) ((TextView) view).setAllCaps(caps);
}

Kotlin :

fun setAllCaps(view: View?, caps: Boolean) {
    if (view is ViewGroup) {
        for (i in 0 until view.childCount) setAllCaps(view.getChildAt(i), caps)
    } else if (view is TextView) view.isAllCaps = caps
}

Call setAllCaps like this :

    tabLayout.addTab(tabLayout.newTab().setText("Recent"));
    tabLayout.addTab(tabLayout.newTab().setText("New"));
    setAllCaps(tabLayout,false);

score 1 · Answer 14 · answered Jan 06 '23 at 13:27

Here the Simple solution to Avoid Capitalize and change font size , font family on TabLayout design in Android 100% Working

Add following style on res/values/stye.xml

 <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
    <item name="android:textSize">16sp</item>
    <item name="android:fontFamily">@font/poppins_semi_bold</item>
</style>

Call this style in your tab layout as app:tabTextAppearance="@style/MyCustomTextAppearance"

      <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#FFF"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabIndicatorHeight="3dp"
        android:layout_marginBottom="@dimen/_5sdp"
        app:tabSelectedTextColor="@color/text_app_color"
        app:tabTextColor="@color/text_app_color_1"
        app:tabMode="auto" />
</com.google.android.material.appbar.AppBarLayout>

DroidCrafter · Answer 15 · 2015-10-28T05:39:43.673

You can also do this in your Java code. If you are using a SlidingTabLayout look at this sample:

protected TextView createDefaultTabView(Context context){
        TextView textView = new TextView(context);
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);//see line 38 above change the value their in TAB_VIEW_TEXT_SIZE_SP.
        textView.setTypeface(Typeface.DEFAULT);//From DEFAULT_BOLD
        textView.setTextColor(Color.parseColor("#536DFE"));//Text color of the words in the tabs. Indigo A200

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB){
            // If we're running on Honeycomb or newer, then we can use the Theme's
        // selectableItemBackground to ensure that the View has a pressed state
            TypedValue outValue = new TypedValue();
            getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, outValue, true);
            textView.setBackgroundResource(outValue.resourceId);
        }

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH){
            // If we're running on ICS or newer, enable all-caps to match the Action Bar tab style
            textView.setAllCaps(true);
        }

        int padding = (int)(TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
        textView.setPadding(padding, padding, padding, padding);

        return textView;
    }

Notice that textView.setAllCaps() has true as the perimeter:

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH){
            // If we're running on ICS or newer, enable all-caps to match the Action Bar tab style
            textView.setAllCaps(true);
        }

When I changed this to (false) it solved the problem for me:

textView.setAllCaps(false);

Also my string resource file that I use for the tabs looks like this:

<string name="tab_title">Title with capital and smaller case</string>

However if it had all caps like >TITLE WITH ALL CAPS< you would still of course get all caps in your tabs.

I made no other changes.

It is noteworthy that you can set textView.setAllCaps(false) too, but this made no difference in my case. I just commented out textView.setAllCaps(true).

score 0 · Answer 16 · answered Mar 28 '21 at 04:03

Changing attributes in XML file doesn't work in Android 11 (SDK 30). Here is code that I use to setup tabs individually using a tab label. It's safer than setting new styles for all text fields in the tabs or relying on the existing tab layout, because the current tab design can be changed by Android. This method assumes that a tab text has been set before the function below is called. Second parameter in the call, txt is a tab label.

private fun setTabStyle(tabs: TabLayout, txt: String) {
    val av = ArrayList<View?>()
    tabs.findViewsWithText(av, txt, View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION )
    if (av.count() > 0) {
        val avt = ArrayList<View?>()
        (av[0] as? ViewGroup)?.let {
            for ( i in 0 until it.childCount) {
                val tv = it.getChildAt(i) as? TextView
                tv?.let {t ->
                    if (tv.text == txt) {
                        t.isAllCaps = false
                        t.setTextSize(TypedValue.COMPLEX_UNIT_SP, 11.toFloat())

                    }
                }

            }

        }
    }

}

score 0 · Answer 17 · answered Jun 21 '22 at 06:09

It'll work if you only add one of these calls.

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

score -1 · Answer 18 · edited Sep 18 '20 at 17:51

-1

Just add this to your custom style file

<item name="android:textStyle">normal</item>

I read all the above solutions and all lead to this.

edited Sep 18 '20 at 17:51

Dharman

30,962
25
85
135

answered Sep 18 '20 at 17:46

Nandagiri Akhilesh

5
9

android:textAllCaps="false" not working for TabLayout design Support

18 Answers18

Linked

Related