Change support ActionBar tabs indicator color

Question

This is a follow up question to this question:

ActionBar AppCompat change Tab indicator color

I'm using the support action bar and adding tabs to it. I want to change the indicator color. What I've tried doing is this:

 <style name="CustomActivityTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
            <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabViewStyle</item>
        <item name="actionBarTabStyle">@style/MyActionBarTabViewStyle</item>
    </style>

<style name="MyActionBarTabViewStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
        <item name="android:background">@color/White</item>
    </style>

This changes the entire tab's color, but I want to change the indicator's color only. What am I doing wrong here?

Hey Please Look this, github.com/codepath/android_guides/wiki/… — Sachin

rafsanahmad007 rafsanahmad007 · Accepted Answer · 2017-04-23T10:08:19

Try this:

Create the theme for the app, the action bar, and the tabs. We need to set the background for the tabs to the “tab_bar_background” drawable.

in res/values/styles.xml

<style name="FindMyTrain" parent="Theme.Sherlock">
    <item name="android:actionBarTabStyle">@style/FindMyTrain.ActionBar.Tab</item>
    <item name="actionBarTabStyle">@style/FindMyTrain.ActionBar.Tab</item>
</style>

<style name="FindMyTrain.ActionBar.Tab">
    <item name="android:background">@drawable/tab_bar_background</item>
</style>

in res/drawable/tab_bar_background add a color state list

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

<selector
xmlns:android="http://schemas.android.com/apk/res/android">   <item
android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@color/transparent"/>   <item
android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_bar_background_selected"/>   <item
android:state_selected="false" android:state_pressed="true"
android:drawable="@color/tab_highlight"/>   <item
android:state_selected="true" android:state_pressed="true"
android:drawable="@drawable/tab_bar_background_selected_pressed"/>
</selector>

here you can customize tab bar pressed and selected state color.

in res/drawable/tab_bar_background_selected

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
            <shape android:shape="rectangle">
                <stroke android:color="#ff4ba587" android:width="5dp"/>
            </shape>
        </item> </layer-list>

Now apply the theme:

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/FindMyTrain"
    android:name=".FindMyTrainApplication" >

Output:

For detail documentation see this Link

Change support ActionBar tabs indicator color

2 Answers