Add a Toolbar Elevation on pre Lollipop

Being a Material Design lover, I get put off by that default flat Toolbar with no shadow or elevation. It’s alright on Lollipop devices as it gives us a nice shadow by default, but pre Lollipop doesn’t. While that’s too bad, we can take care of that real quick!

After you’re done with this post, your Toolbars on pre Lollipop will never be plain and boring again!

Also read: Create a Card Toolbar (Nested Toolbar).

icon icon

Faking a Toolbar Elevation

Since we can’t use the actual Toolbar elevation property for pre Lollipop devices, we’ll imitate one by using :

  1.  9-patch PNG
  2. XML gradient

Personally, I find the XML method more clean, so we’ll go with the second one.

Shadow Drawable

Create a new XML file res/drawable/shadow.xml

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

Here we set a gradient from top to bottom of an opacity of black to transparent respectively.

shadow.xml

shadow.xml

Creating the Toolbar

Now the trick doesn’t lie in modifying the Toolbar as such, but in simply adding a View below it.

Usually we may define a Toolbar in a separate XML file and call it in via the <include /> tag. We’ll stick to the same format (to avoid large and complex layouts).

Android Material UI Template 8 in 1 CodeCanyon

Create a layout res/layout/toolbar_shadow.xml and add this:

<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
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="@drawable/shadow" />

</LinearLayout>

Calling it in

Now with that in place, all we need to do is to reference this in our activity’s layout like this:

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

That’s it we’re done! Take a look at the results yourself and see the difference.

on pre Lollipop

Toolbar Elevation on Lollipop

You can default to the elevation property for Lollipop devices. Now in some cases, as with the new Design support library’s new widgets, after the animation the Toolbars by default have a shadow. So do the Tabs.

You could reference the shadow’s View via an id, and removing it with:

shadowView.setVisibility(View.GONE);

Then set the Toolbar elevation with

toolbar.setElevation(4);

But Wait!

In my opinion, just stick to using the shadow.xml on both pre Lollipop and Lollipop devices. Why? The difference isn’t much and is hardly noticeable.

This is a better trade-off than having to handle it in code, where you must remove the shadow view, then elevate it. That is just a lot of code handling and possible layout inconsistency, you’re much better off this way. One must not waste time as a developer to get something like that to work.


With this way, you can now mimic an elevation for your Toolbars on pre Lollipop as well. We created a shadow drawable in XML using a gradient property. Also you’ve probably accepted the fact that its okay to continue using the same drawable on post Lollipop as well, being a well worth sacrifice.

Do subscribe (below) for instant updates as I continue to bring you more awesome content like this!

Subscribe to stay updated
You'll be first to know about new articles and more. They're sent straight to your inbox!

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn’t annoy people. In his spare time, he likes to draw and paint.

Udemy

Suleiman

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn't annoy people. In his spare time, he likes to draw and paint.

You may also like...

Subscribe to stay updated
You'll be first to know about new articles and more. They're sent straight to your inbox!
Gradle setup, ProGuard rules, Material Design palette, metrics and much more

FREE Material Design Starter Project

For more details, click on the below link.
GET IT NOW FOR ANDROID STUDIO!
Download FREE
STARTER PROJECT
Material Design Template Project for Android Studio