No shadow by default on Toolbar?

android android-5.0-lollipop material-design android-toolbar

143,098

Solution 1

I ended up setting my own drop shadow for the toolbar, thought it might helpful for anyone looking for it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="top"
              android:orientation="vertical">

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                                       android:layout_width="match_parent"
                                       android:layout_height="wrap_content"
                                       android:background="@color/color_alizarin"
                                       android:titleTextAppearance="@color/White"
                                       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <FrameLayout android:layout_width="match_parent"
                 android:layout_height="match_parent">

        <!-- **** Place Your Content Here **** -->

        <View android:layout_width="match_parent"
              android:layout_height="5dp"
              android:background="@drawable/toolbar_dropshadow"/>

    </FrameLayout>

</LinearLayout>

@drawable/toolbar_dropshadow:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">

    <gradient android:startColor="@android:color/transparent"
              android:endColor="#88333333"
              android:angle="90"/>

</shape>

@color/color_alizarin

<color name="color_alizarin">#e74c3c</color>

enter image description here

Solution 2

Google released the Design Support library a few weeks ago and there is a nifty solution for this problem in this library.

Add the Design Support library as a dependency in build.gradle :

compile 'com.android.support:design:22.2.0'

Add AppBarLayout supplied by the library as a wrapper around your Toolbar layout to generate a drop shadow.

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
       <android.support.v7.widget.Toolbar
           .../>
    </android.support.design.widget.AppBarLayout>

Here is the result :

enter image description here

There are lots of other tricks with the design support library.

AndroidX

As above but with dependency:

implementation 'com.google.android.material:material:1.0.0'

and com.google.android.material.appbar.AppBarLayout

Solution 3

You can't use the elevation attribute before API 21 (Android Lollipop). You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.

@layout/toolbar

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

<View
    android:id="@+id/toolbar_shadow"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:background="@drawable/toolbar_dropshadow" />

@drawable/toolbar_dropshadow

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#88333333"
        android:angle="90"/> </shape>

in your activity layout <include layout="@layout/toolbar" />

enter image description here

Solution 4

Use /values folders to apply the correct shadow style based on OS version.

For under 5.0 devices, use /values/styles.xml to add windowContentOverlay to the body of your activity:

<style name="MyViewArea">
    <item name="android:foreground">?android:windowContentOverlay</item>
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

Then add your own custom shadow by changing your Theme to include:

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>

You can grab Google's IO app shadow resource here: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

For 5.0 devices & later, use /values-v21/styles.xml to add elevation to your toolbar using a custom header style:

<style name="MyViewArea">
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

Note that in the second case, I had to create an empty MyViewArea style so the windowContentOverlay wouldn't show up too.

[Update: changed resource names and added Google shadow.]

Solution 5

This worked for me very well:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="?attr/actionBarSize" />

</android.support.v7.widget.CardView>

View more solutions

143,098

MrBrightside

Updated on July 08, 2022

Comments

MrBrightside almost 2 years

I'm updating my app with the new Toolbar from the support library v21. My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?

My code is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

   <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/my_awesome_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:elevation="4dp"
       android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

   <FrameLayout
       android:id="@+id/FrameLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       .
       .
       .

And in my Activity - OnCreate method:

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

rlay3 over 9 years

Are you seeing this on a device running Lollipop?
MrBrightside over 9 years

On a device running Lollipop shows the shadow because of the elevation attribute but not on KitKat or older versions. Thats the expected behavior for the elevation attribute as documentation says, but I was expecting that, by default without the elevation attribute, the shadow would cast like it does the Action Bar on every version.
Billy over 9 years

I posted a possible solution here: stackoverflow.com/a/26759202/553905
radley about 9 years

Use /values folders and styles.xml to apply the proper shadow code based on OS version (see below).

android developer over 9 years

Is it just me, or does the navigation drawer reset the elevation of the toolbar? I"ve tried to set it to 0, and it worked, but then when I drag the navigation drawer, I see it has a shadow again...
C-- over 9 years

setElevation() is defined only for API-21+ though.
Roberto B. over 9 years

@Sebastian The support actionbar elevation works for previous APIs too.
mradzinski about 9 years

Don't forget to hide your view if the device you are running is >= to Lollipop, if not you'll end up with two shadows.
fehbari about 9 years

Excellent solution! I was struggling trying to achieve a consistent look for the toolbar between Lollipop and previous versions. Now it's perfect.
botteaap about 9 years

Internally that uses ViewCompat.setElevation() and thus will only work on API 21 and up.
Jemshit Iskenderov about 9 years

@dragon who spits fire it worked, but View is below every content in xml but when i run it is on top, i'm curious why
radley about 9 years

This is the wrong way to to it because you'll have to remove that view for 5.0 layouts. Use android:windowContentOverlay or android:foreground instead.
radley about 9 years

Use android:windowContentOverlay or android:foreground for under API 21.
Daniel Gomez Rico about 9 years

Can you fix @layout/toolbar example with full layout file?
Anggrayudi H almost 9 years

From Google about designing the Toolbar material design, you should set android:layout_height="4dp" for the height of shadow, instead of 5dp. Actually, elevation is the same as the height of shadow you set on FrameLayout.
Lumii almost 9 years

May I know what is MyBody and MyHeader? Where I should apply them?
radley almost 9 years

I updated the names: MyHeader is now MyToolbar and MyBody is MyViewArea. You can assign styles in xml layouts like this: style="@style/MyToolbar".
avb almost 9 years

Setting the AppBarLayout as a wrapper around the Toolbar doesn't set any shadow for me. Note that I don't use a navigation drawer. Any ideas on why it doesn't work?
Binoy Babu almost 9 years

@avb1994 Can't say for sure, I have tested it without a nav drawer. Can you post it as a question with the layout file?
avb almost 9 years

see my question: stackoverflow.com/questions/31115531/… thanks for your comment
Zach Sperske almost 9 years

What is MyViewArea applied to?
radley almost 9 years

Your page / body / view area.
Andrew almost 9 years

You don't need this two lines compile 'com.android.support:support-v4:22.2.0' compile 'com.android.support:appcompat-v7:22.2.0', because compile 'com.android.support:design:22.2.0' depends on them
Zach Sperske almost 9 years

I'm having trouble with this solution because I inflate my activities layout into the frame layout in your example, can you think of a way for this to work?
Amirul Zin almost 9 years

Do note this only works for lollipop and above. It won't work pre lollipop since underneath it's just using ViewCompat.setElevation().
JacksOnF1re over 8 years

As far as I know, with the design lib you can simply set elevation now.
RED_ over 8 years

Why does @layout/toolbar have two root views? Can you provide the full example please?
Mohammad Faisal about 8 years

Recommending using "android:endColor="#c7c7c7" over android:endColor="#88333333"
fyfyone Google over 7 years

What is the default elevation?
jzeferino over 7 years

@ZachSperske use relative layout instead like this: stackoverflow.com/a/30171360/5223160
androidguy over 7 years

I think android:foreground only works on FrameLayout before API 23.
Aspiring Dev over 7 years

How can this work if on pre lollipop cardview pads itself in order to draw the shadow? This is what I get: i.imgur.com/BIj8env.png this answer worked for me and it doesn't suffer from the drawbacks from this one: stackoverflow.com/questions/26575197/…
Islam A. Hassan about 7 years

Actually, you're better off with the AppBarLayout as in this answer stackoverflow.com/a/31026359/1451716 My answer is old, before the AppBarLayout was released
usernotnull about 7 years

i think you updated your answer without removing @color/color_alizarin
Vaibhav Jani over 6 years

This is best solution so far (It doesn't solve for pre-lollipop devices but that is not a big issue now)
android developer over 6 years

What about previous versions?
android developer over 6 years

What if I want the elevation on the AppBarLayout, as it can collapse/expand ?
behelit over 6 years

@MohammadFaisal that's a lot better on Note 8 since the alternative has a black line at the top. Would this work on non white backgrounds though? seems too light
Ely almost 6 years

setElevation takes a parameter as pixels. You have to convert it appropriately, e.g. (int) (3.0 / Resources.getSystem().getDisplayMetrics().density)
vortal over 5 years

Questions says "Toolbar", not "AppBarLayout"
Mr-IDE about 5 years

I recommend using a black shadow instead of gray: android:startColor="@android:color/transparent" and android:endColor="#32000000"
user155 about 5 years

@vortal Toolbar is placed inside AppBarLayout, take a look one more time
user155 about 5 years

@avb unfortunately it works for Android 21 and higher only
user155 about 5 years

Is this even legal? It's not supposed to be used with Toolbar. OMG!
DJphy about 4 years

nothing worked, except this, right on point and make sense too
Pedro Paulo Amorim almost 4 years

Please remember that gradient is not shadow.
Peter over 3 years

Also note, that depending on your layout, you may also need to add android:clipChildren="false", to your parent(s) of AppBarLayout, otherwise shadow can get cut out
mahee96 about 3 years

Thanks!...I forgot what I did before to have the shadow and this post reminded me!....its android:background attribute of the toolbar ppl!! Also I had set the app:elevation (my min sdk was 21) and thus was wondering why it wasn't working, since my toolbar was inflated programmatically, I forgot that the underlying container which encompasses my toolbar and rest of the view had a background...not sure if it was transparent which might have caused the isssue.