Android Status Bar transparent with Navigation Drawer - Appbar elevation

Question

I am working on an app with Material Design Guidelines. I have a boilerplate app created by Android Studio. For some reason the status bar has a little gradient at the botto

Answer 1

The answer provided by Khizar Hayat is almost correct, but there's a better solution. Using the xml attribute

app:elevation="0dp"

in the toolbar removes the shadow on the status bar, but it also removes the bottom shadow of the toolbar, because the elevation is now set to zero, so the toolbar is at the same level of the background. Per the Google Material Design Guidelines, the Toolbar (or the AppBar) has a resting elevation of 4dp. You can check all the elevations provided by Google here: Elevation and shadows - Google Material Design Guidelines

So, if you want to keep the standard elevation of the Toolbar and also remove the shadow in the status bar, there's a really simple solution.

Now you probably have a layout like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

                <include layout="@layout/toolbar"/>

        </android.support.design.widget.AppBarLayout>

        .....

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/menu_selector"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

This layout is one of the most used patterns to achieve this type of Navigation Drawer. You can see that both the DrawerLayout and the CoordinatorLayout have an xml attribute "android:fitsSystemWindows" setted to "true".

The most simple way to remove the shadow on the status bar is to leave the attribute as it is in the DrawerLayout and set

android:fitsSystemWindows="false"

in the CoordinatorLayout. This will solve your problem.

Answer 2

Add this line in toolbar

app:elevation="0dp"

Answer 3

You can do this by specifying the color of the status bar within the Java code. Within the OnCreate method of your activity, add a line of code:

getWindow().setStatusBarColor(getResources().getColor(R.color.black));

whereas the R.color.black might be changed to any value that you specified in your color.xml file.

I have posted an article specifically talking about the strange status bar behavior. You can check that out here.

Glad to know I'm not the only one bother by this.