How to customize ActionBar Tab

Question

With Android Studio I'm trying to customize my tab with Android Action Bar Style Generator but the changes weren't applied and I don't know why. I also followed the tutorial on Android Developers. I don't know how to go ahead. Can you help me please? I've been trying to do this for weeks. This is my styles.xml:

<style name="Theme.Example" parent="@style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">@drawable/selectable_background_example</item>
<item name="popupMenuStyle">@style/PopupMenu.Example</item>
<item name="dropDownListViewStyle">@style/DropDownListView.Example</item>
<item name="actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
<item name="actionDropDownStyle">@style/DropDownNav.Example</item>
<item name="actionBarStyle">@style/ActionBar.Solid.Example</item>
<item name="actionModeBackground">@drawable/cab_background_top_example</item>
<item name="actionModeSplitBackground">@drawable/cab_background_bottom_example</item>
<item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Example</item>


</style>

<style name="ActionBar.Solid.Example" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">@drawable/ab_solid_example</item>
<item name="backgroundStacked">@drawable/ab_stacked_solid_example</item>
<item name="backgroundSplit">@drawable/ab_bottom_solid_example</item>
<item name="progressBarStyle">@style/ProgressBar.Example</item>
</style>

<style name="ActionBar.Transparent.Example" parent="@style/Widget.AppCompat.Light.ActionBar">
<item name="background">@drawable/ab_transparent_example</item>
<item name="progressBarStyle">@style/ProgressBar.Example</item>
</style>

<style name="PopupMenu.Example" parent="@style/Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item>
</style>

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

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

<style name="DropDownNav.Example" parent="@style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">@drawable/spinner_background_ab_example</item>
<item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item>
<item name="android:dropDownSelector">@drawable/selectable_background_example</item>
</style>

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

<style name="ActionButton.CloseMode.Example" parent="@style/Widget.AppCompat.Light.ActionButton.CloseMode">
<item name="android:background">@drawable/btn_cab_done_example</item>
 </style>

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

and this is my selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<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_example" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_example" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_example" />
<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_example" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_example" />
<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_example" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_example" />
</selector>

(At the end all I want to do is change the indicator color like this)

Answer 1

You have to apply the theme in your manifest like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    ...

    <application
        android:theme="@style/Theme.Example"> <!-- Add the android:theme attribute to the application tag -->

    ....

EDIT

API > 14 uses the android: namespace for the ActionBar in it, while the Compat lib doesn't use it.

values\styles.xml:

<style name="Theme.Example" parent="@style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">@drawable/selectable_background_example</item>
<item name="popupMenuStyle">@style/PopupMenu.Example</item>
<item name="dropDownListViewStyle">@style/DropDownListView.Example</item>
<item name="actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
<item name="actionDropDownStyle">@style/DropDownNav.Example</item>
<item name="actionBarStyle">@style/ActionBar.Solid.Example</item>
<item name="actionModeBackground">@drawable/cab_background_top_example</item>
<item name="actionModeSplitBackground">@drawable/cab_background_bottom_example</item>
<item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Example</item>
</style>

values-v14\styles.xml:

<style name="Theme.Example" parent="@style/Theme.AppCompat.Light">
<item name="android:actionBarItemBackground">@drawable/selectable_background_example</item>
<item name="android:popupMenuStyle">@style/PopupMenu.Example</item>
<item name="android:dropDownListViewStyle">@style/DropDownListView.Example</item>
<item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Example</item>
<item name="android:actionDropDownStyle">@style/DropDownNav.Example</item>
<item name="android:actionBarStyle">@style/ActionBar.Solid.Example</item>
<item name="android:actionModeBackground">@drawable/cab_background_top_example</item>
<item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_example</item>
<item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Example</item>
</style>

See values vs values-v14 on Android Developers.