Question

I am using styles for customizing the appearance of tabs in my app. I have managed to change the color and appearance of the background of the tabs based on whether the tab is selected with no problems.

However, when I am trying to change the color of the TabText to white (#ffffff), nothing seems to be happening.

I am doing this by extending the parent@style/Widget.AppCompat.ActionBar.TabText and setting the android:textColor to my own color: @color/tab_text_color. I have followed the instructions and examples for doing this but the text color just seems to be unaffected.

All I want is for the text color of the tabs to be white all the time as it is only the background of the tabs that will change when selected. I have followed the way many examples do this but for some reason nothing is happening.

Would anyone be able to suggest what I am missing or the way to change the color of text in tabs in an xml style?

Thanks in advance.

The two files involved are below:

themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="CustomActionBarTheme"
       parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
    <item name="actionBarTabTextStyle">@style/TabTextStyle</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
</style>

<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
       parent="@style/Widget.AppCompat.ActionBar.TabView">
    <!-- tab indicator -->
    <item name="android:background">@drawable/actionbar_tab_indicator</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_tab_indicator</item>
</style>


<!-- action bar tab text -->
<style name="TabTextStyle"
       parent="@style/Widget.AppCompat.ActionBar.TabText">
    <item name="android:textColor">@color/tab_text_color</item>
</style>

tab_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:color="#ffffff" />
</selector>
Was it helpful?

Solution

I managed to solve my problem, here is what was needed for anyone who is stuck on this in future:

Creating my own actionBarTabText style seems to be the right way to go. Even though I set the theme of the application in the AndroidManifest as: android:theme="@style/CustomActionBarTheme" , the actual text was being created in a TextView within a linear layout which meant that the style was not being applied to it.

This explains why the other style elements such as the tabs and actionbar backgrounds were being styled but the text was not as they were not created in the layout. To solve this, in my TextView I just set the style attribute to that of the "TabTextStyle" I had created in themes.xml.

I still do not fully understand why I had to apply the particular style manually even though it should have been set as part of the "CustomActionBarTheme" in the AndroidManifest. Anyway, this fix works so here is the code below:

    <TextView
        android:id="@+id/friend_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-10dp"
        android:layout_gravity="center"
        android:text="FRIENDS"
        style="@style/TabTextStyle"/>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top