dark action bar with Theme.AppCompat

Question

I am using Theme.AppCompat for my app to get the dark look. Everything looks good, except the action bar using this theme looks ancient i.e. it has a bright blue bottom divider.

I want the action bar to look like it is in Theme.AppCompat.Light.DarkActionBar.

Looking at themes.xml, i find :

<style name="Theme.AppCompat.Light.DarkActionBar"
       parent="Theme.Base.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">true</item>
</style>


<style name="Theme.Base.AppCompat.Light.DarkActionBar" parent="Theme.Base.AppCompat.Light">
    <item name="actionBarDivider">@drawable/appcompat_divider_dark</item>
</style>

So i create my own style as below :

<style name="myTheme" parent="@style/Theme.AppCompat">
    <item name="actionBarDivider">@drawable/appcompat_divider_dark</item>
</style>

But i get the build error :

No resource found that matches the given name (at 'actionBarDivider' with value 
 '@drawable/appcompat_divider_dark')

Why can't i use the same drawable that is being used by the framework?

Answer 1

The blue line is part of the background image used for the action bar. For example, you can find it in : sdk/platforms/android-19/data/res/drawable-xxhdpi/ab_transparent_dark_holo.9.png

The trick is to create your own Widget style by inheriting Widget.AppCompat.ActionBar and set the background attribute with your desired png, which does not have the blue line. I use the support library's existing@drawable/abc_ab_bottom_transparent_dark_holo. You can find it in the folder sdk/extras/android/support/v7/appcompat/res/drawable-hdpi/.

So create the below element in the styles.xml file.

<style name="myActionBar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@drawable/abc_ab_bottom_transparent_dark_holo</item>
</style>

Then include this newly created style in your theme(already present in the styles.xml file) :

<style name="AppBaseTheme" parent="@style/Theme.AppCompat">
        <item name="android:actionBarStyle">@style/myActionBar</item>
</style>

To enable this change in older APIs, make the same changes in all 3 folder - values-v14, values-v12 and values. One important thing to note is that the "android:" namespace should not be used for the name attributes in the values-v12 and values folders.