25

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?

Praveen
  • 90,477
  • 74
  • 177
  • 219

4 Answers4

29

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.

Danny C
  • 2,980
  • 2
  • 28
  • 20
24

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>
Community
  • 1
  • 1
Alex Volovoy
  • 67,778
  • 13
  • 73
  • 54
  • 3
    @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'.` – Mithun Sreedharan Apr 07 '11 at 14:06
  • @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 – Praveen Apr 08 '11 at 05:35
  • 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?????? – Farhan Apr 12 '11 at 18:03
  • 1
    @Farhan depending on which parent theme you're using, you could add something like . This will make the attribute found. – Robert Oct 08 '14 at 05:38
  • 1
    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 – Gene Bo Aug 29 '16 at 23:33
20

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));
Shahzad Imam
  • 2,030
  • 2
  • 26
  • 45
  • 3
    `android:textColor` should be `android:color` in text_tab_indicator.xml file. – iStar Jul 23 '15 at 14:41
  • 2
    getColorStateList is deprecated, so use ContextCompat.getColorStateList(context, R.color.text_tab_indicator). – CoolMind Jan 20 '16 at 17:16
  • 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 – trampster Aug 22 '16 at 22:05
6

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

javahead76
  • 1,050
  • 10
  • 11