Overlaying the Action Bar not working

Question

I was following official developer's guide to overlay actionbar.

my style.xml is as following:

<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

<style name="AppTheme" parent="AppBaseTheme">
    <item name="actionBarStyle">@style/CustomActionBarTheme</item>

</style>

<style name="CustomActionBarTheme"
    parent="@android:style/Theme.Holo">
    <item name="android:windowActionBarOverlay">true</item>
</style>

My midSdkVersion is 14 and expected output is similar to that on official guide:.

instead, in my case the output is:

(I have set background color to activity...but it isn't overlaying action bar.)

Please help me if anything I'm doing is wrong.

EDIT:

I wanted similar action bar like this in airnb and many other apps. Can anyone give me complete answer for this?

Answer 1

I see some misunderstandings in your code:

1. windowActionBarOverlay should be specified on your theme not on your ActionBar's style.
2. No reason to use a Holo with a support theme. This just breaks your supportability.

Try this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:windowActionBarOverlay">true</item>
    <!--For compatibility-->
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="windowActionBarOverlay">true</item>
</style>

<color name="transparent_black">#80000000</color>
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar.Solid">
    <item name="android:background">@color/transparent_black</item>
    <!--For compatibility-->
    <item name="background">@color/transparent_black</item>
</style>