Add a shadow below the color in status bar

Question

Hello i am having troubles adding both a color and a shadow to the status bar so it looks a bit darkened.

What i have right now is:

and what i want to do is:

My styles.xml is:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
    </style>

    <style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/colorPrimaryDarkShadow</item>
    </style>
</resources>

and my colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#607d8b</color>
    <color name="colorPrimaryDark">#607d8b</color>
<resources>

but for some reason i endup with Toolbar and status bar to have exactly the same color. I tried adding android:elevation="8dp" as suggested in another post but still the same result. Can anyone guide me through it?

Answer 1

You have two options:

1. Change colorPrimaryDark to the color you would like to use under the status bar. The AppCompat themes automatically set the status bar color to colorPrimaryDark.

   Since you are using Material Blue Grey 500 [#607D8B] as your colorPrimary, Google recommends using the 700 version for colorPrimaryDark; which is #455A64.

2. Set the status bar to translucent in your theme using windowTranslucentStatus. This will add a semi-transparent black background to the status bar.

   <item name="android:windowTranslucentStatus">true</item>
   

   You will also have to add android:fitsSystemWindows to your layout in order to make use of this.