Android action bar tab bar divider

Question

I am having problem setting the drawable for the divider. My style.xml looks like this:

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

    <style name="HCLTheme" parent="android:Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/HCLActionBarStyle</item>
        <item name="actionBarStyle">@style/HCLActionBarStyle</item>
        <item name="android:actionBarTabBarStyle">@style/HCLActionBarTabBarStyle</item>
        <item name="android:actionBarTabStyle">@style/HCLActionBarTabStyle</item>
    </style>

    <style name="HCLActionBarStyle" parent="android:style/Widget.Holo.ActionBar">
        <item name="android:background">@drawable/hcl_actionbar_drawable</item>
        <item name="background">@drawable/hcl_actionbar_drawable</item>
        <item name="android:titleTextStyle">@style/HCLActionBarTitle</item>
    </style>

    <style name="HCLActionBarTabBarStyle" parent="@android:style/Widget.Holo.ActionBar.TabBar">
        <item name="android:showDividers">middle</item>
        <item name="android:divider">@drawable/divider</item>
        <item name="android:dividerPadding">0dp</item>
    </style>

    <style name="HCLActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:background">@drawable/action_bar_tab_style</item>
    </style>

    <style name="HCLActionBarTitle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

In the HCLActionBarTabBarStyle I'm setting the @drawable/divider as the tab divider. This drawable is a 9patch image, a vertical black line.

Before i set the divider drawable in the xml I'm getting the normal white divider like this:

After i set the drawable in the styles.xml i get this:

So as you can see the divider just gets wider, and its not the black vertical line from the 9patch image. I'm not even sure what the drawable for the divider has to be? A picture or layer list, or can it be a color? In fact i tried all of these 3 but with no success.

Answer 1

Use the property of "actionBarDivider" on the custom style.

Something like below

<style name="AppTheme" parent="AppBaseTheme">
     <!-- You app specific customization -->
     <item name="android:actionBarStyle">@style/MyActionBar</item>
     <item name="android:actionMenuTextColor">@color/menu_state_list</item>
     <item name="android:actionBarTabStyle">@style/tabStyle</item>
     <item name="android:actionBarTabTextStyle">@style/tabTextColor</item>

     <!-- Set it like this -->
     <item name="android:actionBarDivider">@drawable/verticle_marker_thin</item>
</style>

Answer 2

create tab divider picture

in styles add an item shown below

<item name="android:actionBarTabBarStyle">@style/customTabBar</item> 

code for devider in action bar tab indicator

<style name="customTabBar" parent="@style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<!-- give your divider here -->
<item name="android:divider">@drawable/tabindicator</item>
<item name="android:dividerPadding">0dp</item>

where @drawble/tabindicator is a picture in drawble