Background colour of tabs

Question

I am trying to add colours to tabs of action bar with the help of following link-https://github.com/thecodepath/android_guides/wiki/ActionBar-Tabs-with-Fragments

I added following statements to style.xml-

<style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabStyle">@style/MyTheme.ActionBar.TabView</item>

    </style>
  <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:background">#12ABEE</item>
        <item name="android:actionMenuTextColor">#ffffff</item>
        <item name="android:titleTextStyle">@style/myTheme.ActionBar.Text</item>
    </style>

    <style name="myTheme.ActionBar.Text" parent="@android:style/TextAppearance">
        <item name="android:textColor">#ffffff</item>
        <item name="android:textStyle">bold</item>
        <item name="android:gravity">center</item>
    </style>
 <style name="MyTheme.ActionBar.TabView" parent="android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:background">@drawable/tab_bar_background</item>
    </style>

Also i created tab_bar_background.xml in drawable-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#65acee" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <!-- SELECTED TAB STATE -->
    <item android:state_selected="true" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Tab background color for the SELECTED tab state -->
            <item>
                <shape>
                    <solid android:color="#cef9ff"/>
                </shape>
            </item>
            <!-- Bottom indicator color for the SELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#5beea6" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

With these steps in place it should show tab with light blue backgroung(#cef9ff) and green bottom line(#5beea6) on selected and blue bottom line and normal background on unselected.But unfortunately while running i see that bottom line appears fine but the background colour of tab appears black both for selected and unselected tabs.I am not able to figure out wht went wrong..

Answer 1

Updating tab_bar_background.xml to this solved my problem

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- UNSELECTED TAB STATE -->
        <item android:state_selected="false" android:state_pressed="false">
            <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
                <!-- Bottom indicator color for the UNSELECTED tab state -->
                <item >
                    <shape >
                        <stroke android:color="#e8e8e8"  android:width="25dp" />
                    </shape>
                </item>
            </layer-list>
        </item>
        <!-- SELECTED TAB STATE -->
        <item android:state_selected="true" android:state_pressed="false">
            <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
                <!-- Tab background color for the SELECTED tab state -->

                <!-- Bottom indicator color for the SELECTED tab state -->
                <item>
                    <shape >
                        <stroke android:color="#ffd866"   android:width="25dp"/>
                    </shape>
                </item>
            </layer-list>
        </item>
    </selector>