how to change the color of the tabs indicator text in android?

Question

how to change the color of the text indicator of tab? i can change the icon using selector tag refered the example. but cant to the text color. how?

Escobedo

Answer 1

Style it in your custom theme change

<item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item> 

and

<style name="Widget.TabWidget">
        <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:singleLine">true</item>
</style>  


<style name="TextAppearance.Widget.TabWidget">
    <item name="android:textSize">14sp</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@android:color/tab_indicator_text</item>
</style>     

Wary

@DroidBase, @Alex Volovoy, where should i place the styles. When I put it as a separate xml file under values folder, got the error Error retrieving parent for item: No resource found that matches the given name 'Widget'. – Galsworthy

@Mithun: Please post some code snippet find the exact solution. My guess is you did not mention the parent attribute. that is override the default style of an xml object – Escobedo

hey @Alex, looking nice but i m not able to give it a try.... its my first time with styles... could you please elaborate what you are trying to say? @DroidBase you also please explain what you are trying to say in apidemos comment?????? – Foppish

@Foppish depending on which parent theme you're using, you could add something like <style name="Widget.TabWidget" parent="@android:style/Theme.Holo"></style>. This will make the attribute found. – Rayner

This is a nice solution, but only worked for me with Robert's comment here to set parent. To set the necessary attribute parent without having to figure out another theme you want to use, you can use this parent="@style/AppTheme" to use the existing AppTheme style in styles.xml – Halda

Answer 2

Here is a new answer I found from Fred Grott (http://knol.google.com/k/fred-grott/advance-tabs/) after a little web searching.
This lets you set a selector for text color so a different color can be used when tab is selected or not. Which can be very useful if you are using a different background color for the tab if its selected. Of course you can also just throw in a plain color and not a selector.

final TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);        
tv.setTextColor(this.getResources().getColorStateList(R.color.text_tab_indicator));

Where R.color.text_tab_indicator is a selector xml file located in your res/drawable folder.

In other words, the indicator text really is a TextView which is retrievable via the View object which can be accessed from the TabWidget object.
Take a look at Fred's examples for more info and context regarding the variable declarations as well as other tricks.

Subadar

tv is null, findViewById(android.R.id.title) does not find it – Germanous

Answer 3

Danny C's answer is 100% correct.I just wanted to add something to it to make a complete answer with resource file.

The text_tab_indicator under res/color file

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:textColor="@color/text_tab_selected"
    android:state_selected="true" />
<item android:textColor="@color/text_tab_unselected"
    android:state_selected="false" />
</selector>

And this text_tab_unselected & text_tab_selected will look like this under colors/values folder

<resources> 
<color name="text_tab_selected">#ffffff</color>
<color name="text_tab_unselected">#95ab45</color>

After that finally add Dannyy's answer in tab class file

final TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);        
tv.setTextColor(this.getResources().getColorStateList(R.color.text_tab_indicator));

Beilul

android:textColor should be android:color in text_tab_indicator.xml file. – Montherlant

getColorStateList is deprecated, so use ContextCompat.getColorStateList(context, R.color.text_tab_indicator). – Anvil

fails because tv is null, doesn't seem to be able to find a TextView with id title. My code is in the OnCreate of the fragment containing the TabLayout – Germanous

Answer 4

The change in color can also be stated without using java - which is probably better.

I made changes to the text_tab_indicator (notice textColor was changed to 'color'):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/text_tab_selected" />
    <item android:state_selected="false" android:color="@color/text_tab_unselected" />
</selector>

Set the style of the TabWidget to point to a specific style in your xml code:

<TabWidget
    ...
    style="@style/TabText"
    />

Declare your text_tab_indicator located in /res/color as you desired color in the style

<style name="TabText">
    <item name="android:textColor">@color/tab_text_color</item>
</style>

It worked like a charm (for me).

Cheers, Randall

Amylolysis

Though this solution looks perfect, it hasn't worked on both of my devices (Android 5 and 2.3). – Anvil