How to change Tab Style and Color using AppCompat Library

Question

I am making a small program in which i am using Fragment Tabs with swipe, to make it stylish i used Style Generator, and my experience was good with that.

Now i wanna do a small change in existing look of my Tabs, this time i am talking about Tab Text style.

first view screen shot of my simple stylish ActionBar

enter image description here

Like we can see all Tab's text are looking equivalent, so here i need your help, in my case text style for selected Tab will remain same white as bold as it is looking, but want to change text style for others as normal (i mean those are not selected like:- IOS and WINDOWS)

styles.xml:

<resources>

    <style name="Theme.Compatstyle4" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarItemBackground">@drawable/selectable_background_compatstyle4</item>
        <item name="popupMenuStyle">@style/PopupMenu.Compatstyle4</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Compatstyle4</item>
        <item name="actionBarTabStyle">@style/ActionBarTabStyle.Compatstyle4</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Compatstyle4</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Compatstyle4</item>
        <item name="actionModeBackground">@drawable/cab_background_top_compatstyle4</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_compatstyle4</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Compatstyle4</item>

                <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Compatstyle4.Widget</item>

    </style>

    <style name="ActionBar.Solid.Compatstyle4" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_compatstyle4</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_compatstyle4</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_compatstyle4</item>
        <item name="progressBarStyle">@style/ProgressBar.Compatstyle4</item>
    </style>

    <style name="ActionBar.Transparent.Compatstyle4" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_compatstyle4</item>
        <item name="progressBarStyle">@style/ProgressBar.Compatstyle4</item>
    </style>

    <style name="PopupMenu.Compatstyle4" parent="@style/Widget.AppCompat.PopupMenu">    
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_compatstyle4</item>  
    </style>

    <style name="DropDownListView.Compatstyle4" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_compatstyle4</item>
    </style>

    <style name="ActionBarTabStyle.Compatstyle4" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_compatstyle4</item>
    </style>

    <style name="DropDownNav.Compatstyle4" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_compatstyle4</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_compatstyle4</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_compatstyle4</item>
    </style>

    <style name="ProgressBar.Compatstyle4" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_compatstyle4</item>
    </style>

    <style name="ActionButton.CloseMode.Compatstyle4" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_compatstyle4</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Compatstyle4.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Compatstyle4</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Compatstyle4</item>
    </style>

</resources>

Like: I want to show text color as default for selected tab and gray for others

score 6 · Answer 1 · answered Feb 21 '14 at 10:10

You will need to do settings in three places.

Your ActionBAr theme, where I set my tabstyle as a custom one defined below.

<!-- All customizations that are NOT specific to a particular API-level can go here. -->

<item name="actionBarTabStyle">@style/CustomActionBarTabs</item>
<item name="actionBarTabTextStyle">@style/CustomActionBarTabs_TextColor</item>

My custom tab style which refers to a drawable selector for various states.

<!-- action bar tab styles -->
<style name="CustomActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
   <item name="android:background">@drawable/tab_indicator_ab_custom_actionbar_style</item>
   <item name="android:textColor">#666666</item>
</style>

My selector, set this as per your requirement.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_custom_actionbar_style" />

  <!-- Focused states -->
 <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_custom_actionbar_style" />
 <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_custom_actionbar_style" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_custom_actionbar_style" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_custom_actionbar_style" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_custom_actionbar_style" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_custom_actionbar_style" />
</selector>

I tried the same, but the actionbar text color does not change. — rekire, Mar 12 '14 at 12:51
Thanks. Glad to hear it worked. Btw, you can accept it too. :) — Atul O Holic, Mar 12 '14 at 18:47
I am not being able to do this, I beg you, can you upload an example project with those appcompat tabs having a different color when selected and not selected? — PedroD, Feb 07 '15 at 10:30
@style/CustomActionBarTabs_TextColor is not defined in the answer. — Joan Casadellà, Sep 23 '15 at 10:41
Are you still using this? If yes I will update the answer else you can try the material way - http://www.exoguru.com/android/material-design/navigation/android-sliding-tabs-with-material-design.html — Atul O Holic, Sep 23 '15 at 12:11

score 0 · Answer 2 · answered Feb 21 '14 at 08:58

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

what if i want to show text color as default for selected tab and gray for others, i am placing my styles xml as well please see that ! — Sun, Feb 21 '14 at 09:06

How to change Tab Style and Color using AppCompat Library

2 Answers2