How can I have a drop shadow on my ActionBar (ActionBarSherlock)?

Question

I am including my styled xml layout:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme.Styled" parent="Theme.Sherlock">
        <item name="actionBarStyle">@style/Widget.MyApp.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.MyApp.ActionBar</item>

    </style>

    <style name="Widget.MyApp.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
        <item name="titleTextStyle">@style/Widget.MyApp.TitleTextStyle</item>
        <item name="background">@color/red</item>
        <item name="android:background">@color/red</item>
        <item name="windowContentOverlay">@null</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="Widget.MyApp.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">21sp</item>
    </style>

</resources>

Some of the search over internet suggests that use windowContentOverlay set to @null. But when i use it in the style xml it doesn't change anything. Can any one help what to do?

Answer 1

If you want to create a shadow below the ActionBar you have to set android:windowContentOverlay parameter on the application theme (in your code you are incorrectly setting it on the ActionBar style).

In your example it would be:

<style name="Theme.Styled" parent="Theme.Sherlock">
        ...
        <item name="android:windowContentOverlay">@drawable/my_actionbar_shadow</item>
</style>

Using @null value removes the shadow.

This one line sets the shadow on ActionBar on Android 3.0 and newer. However if you are using ActionBarSherlock, it will not work as you expect. It would create the shadow on top of the window over the ActionBarSherlock on Android devices running system older than Android 4.0 (although ActionBar is present in the api since Android 3.0, ActionBarSherlock uses custom implementation for all Android versions older than Android 4.0).

To create the shadow below ActionBarSherlock you have to set windowContentOverlay parameter on the application theme (notice the missing android:).

<style name="Theme.Styled" parent="Theme.Sherlock">
        ...
        <item name="windowContentOverlay">@drawable/my_actionbar_shadow</item>
</style>

Again, using @null removes the shadow.

Although this line works for ActionBarSherlock, it doesn't work on android devices running Android 4.0 and newer, no shadow is created under the ActionBar on such devices. So how to combine these two parameters to get the desired shadow under both ActionBar and ActionBarSherlock?

Use resource configuration qualifiers, in your case use platform version qualifiers. In res/values/styles.xml use the second xml code. And in res/values-v14/styles.xml use the first xml code. Therefore the ActionBarSherlock version is used by default (for versions pre Android 4.0) and ActionBar version is used for Android 4.0 and newer.

Edit: There is a bug in Android 4.3 (API level 18), android:windowContentOverlay does not work. It should be fixed in future release. In case you need it fixed in Android 4.3, you can find workarounds linked in the bug report.

Answer 2

As a previous answer did say use "windowContentOverlay" in the application theme and NOT the action bar style.

<style name="Theme.Styled" parent="Theme.Sherlock">
        ...
        <item name="windowContentOverlay">@drawable/my_actionbar_shadow</item>
</style>

If you want a realistic shadow you can find one in the "Your Android Folder"/platforms/android-16/data/res/drawable-hdpi/

ab_solid_shadow_holo.9.png and copy it to your drawable-hdpi folder then the end result is

<style name="Theme.Styled" parent="Theme.Sherlock">
        ...
        <item name="windowContentOverlay">@drawable/ab_solid_shadow_holo</item>
</style>

Answer 3

In addition, above API21(Lollipop), you will need this in code, too.

getSupportActionBar().setElevation(0);