Is there any way to do a Material-style shadow in API < 21 (5.0 Lollipop)?

Question

Material design makes a huge emphasis on the metaphor of "sheets of paper". To make these, shadows are essential. Since Material design is a philosophy and not an API (despite it being built into L), this should be done anywhere (Windows Forms, HTML/CSS, etc.). How do I do this in Android API 14 to 20?

Note that premade PNGs won't really be that practical for circular and other non-square shapes.

Answer 1

If you're not worried about backwards compatibility past Lollipop, you can set the elevation Attribute directly in the XML

    android:elevation="10dp"

Otherwise you have to set it in Java using the support.v4.ViewCompat library.

    ViewCompat.setElevation(myView, 10);

and add this to your build.gradle

    compile 'com.android.support:support-v4:21.+'

http://developer.android.com/reference/android/support/v4/view/ViewCompat.html#setElevation(android.view.View,%20float)

Answer 2

here is just a rough sample ...

<?xml version="1.0" encoding="utf-8"?>

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#00CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#10CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#20CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#30CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#50CCCCCC"/>
    </shape>

</item>

<!-- Background -->
<item>
    <shape android:shape="oval">

        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
    </shape>
</item>

In your layout file you may use it ...

<Button
        android:id="@+id/add_btn"

        android:text="+"
        android:textColor="#FFFDFC"
        android:textSize="44sp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:layout_marginBottom="40dp"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:clickable="true"
        android:enabled="true"
        android:singleLine="false"
        android:layout_alignParentTop="false"
        android:background="@drawable/round_button"/>

Answer 3

Rendering shadows on pre-Lollipop is not easy, but possible. The trick is that a shadow is simply a black, blured shape of a view. You can do that by yourself.

1. Draw your shadow-casting view to a bitmap with LightingColorFilter(0,0) set
2. Blur it using ScriptIntrisincBlur
3. Draw the shape
4. Draw the view on top of the shape

Sounds lika a lot of code to write, but it works for all cases, so you can easily cover all your views.

Answer 4

The floating action button (with shadow) can be emulated on old platforms with a simple java class.

I'm using Faiz Malkani's version here: https://github.com/FaizMalkani/FloatingActionButton

[Note, that to get it compatible back to Gingerbread you'll need to put some SDK version checks around the animations and transparency calls in his code.]