No shadow by default on Toolbar?

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:

  • ProgressBars and Espresso
  • Why can't this specific device be enumerated by UsbManager.getDevicesList()?
  • Why logcat is not showing anything?
  • How can you put the android emulator into sleep mode?
  • Google Maps v2 Marker zOrdering - Set to top
  • FragmentPagerAdapter Swipe to show ListView 1/3 Screen Width
  • <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);
    

    Related posts:

    Is there a multiplatform framework for developing iPhone / Android applications?
    Android: Eclipse autocomplete does not work in xml files
    How do I reduce the line spacing between text in my Android layout?
    Dependency conflict error in my Android app which has Android Tests
    Unable to link native library in OpenCV Android sample
    What is impression CTR, Request RPM, Impression RPM in admob
  • How to change a layer-list drawable?
  • Android: How to open a specific folder via Intent and show its content in a file browser?
  • Support library: FragmentTransaction animations not working
  • Scala actors on android
  • Pocket Sphinx on Android
  • Android transparent canvas (surfaceview)
  • 11 Solutions collect form web for “No shadow by default on Toolbar?”

    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

    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.

    1. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
    2. http://android-developers.blogspot.in/2015/05/android-design-support-library.html

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

    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>
    

    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

    If you are seting the ToolBar as ActionBar then just call:

    getSupportActionBar().setElevation(YOUR_ELEVATION);
    

    Note: This must be called after setSupportActionBar(toolbar);

    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?

    That’s the normal behavior. Also see the FAQ at the end of this post.

    You can also make it work with RelativeLayout. This reduces layout nesting a little bit 😉

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolbar" />
    
        <View
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_below="@id/toolbar"
            android:background="@drawable/toolbar_shadow" />
    </RelativeLayout>
    

    Was toying with this for hours, here’s what worked for me.

    Remove all the elevation attributes from the appBarLayout and Toolbar widgets (including styles.xml if you are applying any styling).

    Now go to your activity, and apply the elvation on your actionBar like so:

    Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setElevation(3.0f);
    

    This should work.

    actionbar_background.xml

        <item>
            <shape>
                <solid android:color="@color/black" />
                <corners android:radius="2dp" />
                <gradient
                    android:startColor="@color/black"
                    android:centerColor="@color/black"
                    android:endColor="@color/white"
                    android:angle="270" />
            </shape>
        </item>
    
        <item android:bottom="3dp" >
            <shape>
    
                <solid android:color="#ffffff" />
                <corners android:radius="1dp" />
            </shape>
        </item>
    </layer-list>
    

    add to actionbar_style background

    <style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="background">@drawable/actionbar_background</item>
        <item name="android:elevation">0dp</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:layout_marginBottom">5dp</item>
        <item name="logo">@drawable/ab_logo</item>
        <item name="displayOptions">useLogo|showHome|showTitle|showCustom</item>
    </style>
    

    add to Basetheme

    <style name="BaseTheme" parent="Theme.AppCompat.Light">
       <item name="android:homeAsUpIndicator">@drawable/home_back</item>
       <item name="actionBarStyle">@style/TFKBTheme.ActionBar</item>
    </style>
    

    check whether this attribute is set on style.xml if yes then shadow won’t appear

    <style name="MyAppTheme" parent="android:Theme.Holo.Light">
        <item name="android:windowContentOverlay">@null</item>
    </style>
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.