Toolbar's shadow on status bar for Lollipop

Question

I'm using a template from Android Studio that used AppCompat Toolbar. Unfortunately, the toolbar casts shadow on the status bar so it doesn't look right.I also implement a NavigationDrawer so I can't simply set the color of the status bar.

This is how it looks:

This is how it should be:

activity_main.xml

<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">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

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

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

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="hu.pe.thinhhoang.aaosync.MainActivity">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

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

styles.xml (v21)

<resources>>

<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>

</resources>

Thanks for your fast reply. I've edited my post to include the code. — Hoàng Đình Thịnh, Jan 20 '16 at 04:54
Possible duplicate of [How to remove top border shadow from ActionBar](http://stackoverflow.com/questions/34210184/how-to-remove-top-border-shadow-from-actionbar) — Allan Veloso, May 16 '16 at 20:48

score 15 · Answer 1 · edited Jul 03 '16 at 04:57

Put a LinearLayout in like this:

<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activities.MainScreenActivity">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main_screen" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

`android.support.design.widget.CoordinatorLayout` works as well (if you'd like to add multiple elements like it was a `RelativeLayout` but at the same time getting the space for the toolbar right). — Andrea Lazzarotto, Aug 16 '16 at 21:43
This fixes the shadow but may break navigation drawer. Remove `android:fitsSystemWindows="true"` instead. — Paweł Nadolski, Nov 01 '17 at 09:00

score 6 · Accepted Answer · answered Jan 20 '16 at 04:57

6

This shadow is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's @null).

When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be @null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.

answered Jan 20 '16 at 04:57

I was taking the screenshot from a Lollipop device actually... Did I do anything wrong? – Hoàng Đình Thịnh Jan 20 '16 at 07:38
The AppBarLayout is the element which casts the shadow on the statusbar. The best solution so far I can find is this, that is to remove the AppBarLayout and add manually add shadow below the app bar. – Hoàng Đình Thịnh Jan 26 '16 at 13:29

score 6 · Answer 3 · answered Apr 05 '16 at 14:11

6

I tried all the other answers and none worked. What fixed it was adding this to the AppBarLayout:

    app:elevation="0dp"

answered Apr 05 '16 at 14:11

dbar

1,740
1
16
20

Great! This advice helped, no other one helped. – CoolMind Jul 28 '16 at 17:24
3

Solves 50% of the problem as this removes the drop shadow also from the bottom side where it should actually remain. – Chapz Sep 20 '16 at 12:02
1

Removes the bottom shadow as well, so not useful – Jason Jan 19 '17 at 15:23

ʍѳђઽ૯ท · Answer 4 · 2016-01-20T14:02:11.293

That's because of :

<item name="android:statusBarColor">@android:color/transparent</item>

i guess.

Got it, check this:

http://developer.android.com/training/material/theme.html#StatusBar

To set a custom color for the status bar, use the android:statusBarColor attribute when you extend the material theme. By default, android:statusBarColor inherits the value of android:colorPrimaryDark.

And you've set it to transparent.this is not a good way for doing that since Google put this code for you:

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

And also, instead of:

<style name="AppTheme.NoActionBar">

Use this and add a parent and check:

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">

The transparent color was autogenerated by Android Studio when I chose NavigationDrawer layout. Without it, the status bar isnt transparent and may look weird when you pull the drawer out. — Hoàng Đình Thịnh, Jan 20 '16 at 14:57

score 3 · Answer 5 · answered Sep 23 '16 at 03:05

3

To get the correct behavior, you will need to remove

android:fitsSystemWindows="true"

From android.support.design.widget.CoordinatorLayout

In your styles.xml, color defined in colorPrimaryDarkwill be used for drawing the notification bar.

You will need to have styles.xml in your values-v21 folder with following item in your styles:

 <item name="android:statusBarColor">@android:color/transparent</item>

Hope this helps.

answered Sep 23 '16 at 03:05

bond

11,236
7
48
62

This one actually worked! I tried all the other suggestions, but this one fixed it properly; a shadow on the bottom but no shadow on the top, and didn't ruin the nav drawer. – Ben Grant Dec 08 '16 at 04:22
1

Hmm this did not work. It removed the shadow from the status bar, but now the status bar color is a very light gray (not my `colorPrimaryDark`). – friederbluemle Jan 24 '17 at 14:21

Toolbar's shadow on status bar for Lollipop

5 Answers5

Linked