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 ?

do not go with older OS option, It seems you have add an old OS option — Kirtikumar A., Dec 05 '16 at 09:50
Are you referring to 'minSdkVersion' or 'targetSdkVersion' ?? .... i'm testing on Android 6.0 device, the google now screenshot is also taken from the same device... i have mentioned in my sample app with minSdkVersion as 21 , and targetSdkVersion as 23 — Jitendar M, Dec 05 '16 at 10:15

score 6 · Accepted Answer · edited May 23 '17 at 11:45

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.

If i notice it correctly, i could see that its not google now app that is having the scrim, but the home screen ( i.e. status bar itself has the scrim ). we can check the android source code of status bar, how the scrim is applied. — Jitendar M, Dec 15 '16 at 10:01
@Jitendar I do not think it is applied to the status bar directly (though I wouldn't completely rule it out). I think the [Google Now Launcher](https://play.google.com/store/apps/details?id=com.google.android.launcher&hl=en), which isn't open source, applies the content scrim to the home screen — Bryan, Dec 15 '16 at 13:40

score 0 · Answer 2 · answered Dec 06 '16 at 18:13

First add a style to make fully transparent action status bar:

<!-- Base application theme. -->
<style name="TransparentTheme" parent="android:Theme.Holo.Light">
<!-- Customize your theme here. -->
<item name="android:windowBackground">@null</item>
<item name="android:actionBarStyle">@style/ActionBarStyle.Transparent</item>
<item name="android:windowActionBarOverlay">true</item> 
</style>

<style name="ActionBarStyle.Transparent" parent="android:Widget.ActionBar">
<item name="android:background">@null</item>
<item name="android:displayOptions">showHome|showTitle</item>
<item name="android:titleTextStyle">@style/ActionBarStyle.Transparent.TitleTextStyle</item>
</style>

<style name="ActionBarStyle.Transparent.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@android:color/white</item>
</style>

and to add scrim to it create a drawable file and add this code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#88000000" />
<gradient
    android:angle="90"
    android:centerColor="#66000000"
    android:centerY="0.3"
    android:endColor="#00000000"
    android:startColor="#CC000000"
    android:type="linear" />
</shape>

and add this as background in your theme;

Didn't worked exactly like it used to be but i definitely get some good hint from your answer. — , Dec 06 '16 at 18:22

Google Now gradient/shadow on status bar & navigation bar

2 Answers2

Linked