Google Now gradient/shadow on status bar & navigation bar

Question

I'm trying to make a similar status bar and navigation bar gradient as Google Now.

Image Reference: Rectangular area indicated as below

After trying the below option on Android Marshmallow,

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

I get the below behaviour

Image Reference:

Can anyone suggest me how to get gradient on both these ?
Is that a gradient or is that a shadow ?

Answer 1

It is a gradient being used as a scrim. To achieve this effect, the first thing you have to do is remove the semi-transparent underlay for the Status and Navigation bars. Another answer details how you can do this on lower platform devices; but on Android Lollipop and higher, you can do this simply by setting two style attributes to transparent:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

Then, to add the scrim, you can use a shape drawable:

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

    <gradient android:type="linear"
        android:angle="270"
        android:centerY="0.3"
        android:startColor="#66000000"
        android:centerColor="#33000000"
        android:endColor="#00000000"/>

</shape>

Then you can just set this as the background to a View in your layout:

<View
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:background="@drawable/scrim"/>

You can also set the android:rotation="180" attribute to use the same gradient for the bottom of the screen.