Add elevation/shadow on toolbar for pre-lollipop devices

Question

I updated my android app to the new material design, but I also wanted to add some shadow or elevation to the Toolbar. There seem to be some (hacky) ways of doing it via images/9-patches, but I wonder if it can be done via the support libraries. (just like the CardView can have elevation)

According to this answer on another question, this is possible by wrapping the Toolbar in a AppBarLayout, but this doesn't work for me.

My layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
    <android.support.v7.widget.Toolbar
            android:id="@+id/Toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

I also tried setting elevation via XML and through code, but that doesn't work either.

Any help would be appreciated! Thanks in advance.

Update:

Since I include my Toolbar layout in my other layouts, below is one of my main layouts:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        layout="@layout/Toolbar" />
    <fragment
        class="OverAllField.XamarinAndroid.Fragments.Planning.PlanningFragment"
        android:id="@+id/PlanningFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

Answer 1

For Android 5.0 and above : AppBarLayout automatically provides/gives shadow in the layout. You can also increase the elevation of the AppBarLayout by app:elevation="4dp".

For Pre-Lollipop : You can use the following link: https://github.com/vipulasri/Toolbar-Elevation-Pre-Lollipop

Note: Toolbar also supports elevation to it, using android:elevation="4dp"

---

New Update: In Appcompat v24.0.0, you can not set elevation to AppBarLayout using setElevation() and app:elevation as these are deprecated.

You have to use stateListAnimator property to set elevation now.

Note: set duration to 1ms in StateListAnimator in order to avoid delay in Elevation Drawing.

AppBarLayout elevation change is delayed on appCompat v24.0.0

appbar_always_elevated.xml in animator-v21 folder under res directory.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <objectAnimator android:propertyName="elevation"
                    android:valueTo="8dp" 
                    android:valueType="floatType"
                    android:duration="1"/>
</item>
</selector>

In AppbarLayout :

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:stateListAnimator="@animator/appbar_always_elevated"
        android:theme="@style/AppTheme.AppBarOverlay">

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

Answer 2

Try using the AppBarLayout inside the activity layout. Try:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <include
            layout="@layout/Toolbar" />
    </android.support.design.widget.AppBarLayout>

    <fragment
        class="OverAllField.XamarinAndroid.Fragments.Planning.PlanningFragment"
        android:id="@+id/PlanningFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

Toolbar.xml

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

Answer 3

use build file:

---

compile 'com.android.support:cardview-v7:23.1.1'

refer this link

to call in xml add:

app:cardElevation="8dp"
app:cardCornerRadius="8dp"
app:contentPadding="5dp"

Answer 4

I think the best solution is to put a gradient shadow view below the toolbar and manipulate with visibility depends on device sdk.

toolbar.xml

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/white"
            android:fitsSystemWindows="true"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <TextView
                android:id="@+id/centerTitleToolbarTextView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:maxLines="1"
                android:textColor="@color/color_toolbar"
                android:textSize="@dimen/titleToolbar" />

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

        <View
            android:id="@+id/shadow_view"
            android:layout_width="match_parent"
            android:visibility="gone"
            android:layout_height="4dp"
            android:background="@drawable/toolbar_shadow" />

    </LinearLayout>

toolbar_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#c1c1c1"
        android:centerColor="#e6e6e6"
        android:endColor="#f1f1f1"
        android:angle="270" />
</shape>

MainActivity.class

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        findViewById(R.id.shadow_view).setVisibility(View.VISIBLE);
      }