android:textAllCaps=“false” not working for TabLay

问题:

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?

回答1:

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>

回答2:

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

回答3:

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

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

回答4:

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

回答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);
    }

回答6:

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.

回答7:

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>

回答8:

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

回答9:

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.

回答10:

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="12sp" simultaneously, so his old method works:

in styles.xml:

<style name="TabLayout" parent="Widget.Design.TabLayout">
    <item name="android:textSize">12sp</item>
    <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="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"
    />

回答11:

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

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