Search code examples
androidandroid-5.0-lollipopmaterial-designandroid-toolbar

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:

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

Solution

  • 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