Android Status Bar transparent with Navigation Dra

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 bottom which creates an illusion of Appbar (Toolbar) being on a higher elevation than status bar.

I took a look on Chris Bane's Cheesesquare app for reference and it doesn't look like he is doing anything special to achieve that.

Here are the screenshots for reference -

---

Boilerplate app

---

Cheesesquare app

---

Notice that Cheesesquare app's status bar and app bar feel like on the same elevation with just different shades of purple. Whereas My Application's status bar feels like it lies at lower elevation than the app bar.

Boilerplate code has following snippet of code in

v21/styles.xml

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

How can I achieve the feel of Cheesesquare app?

P.S. I am using Android Support Library 23.2 that was just released (Feb 2016)

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

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.

Answer 3

Add this line in toolbar

app:elevation="0dp"