Is there any way to do a Material-style shadow in

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

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

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

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 5

You can use android.support.v7.widget.CardView.

Maybe is not the perfect solution but for me is working on what I want. So, for example this is the trick I use on my app ... on an rectangular shape and I am pleased of the result.

private View.OnTouchListener touch = new View.OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        final android.support.v7.widget.CardView card_view = (android.support.v7.widget.CardView) ((View) v.getParent()).findViewById(R.id.card_view);


        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                card_view.setCardElevation(6);
                card_view.setScaleX(1.007f);
                card_view.setScaleY(1.007f);
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:

                card_view.setCardElevation(3);
                card_view.setScaleX(1f);
                card_view.setScaleY(1f);
                break;
        }
        return false;
    }
};

In xml file I use:

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"

android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"

card_view:cardCornerRadius="2dp"
card_view:cardMaxElevation="6dp"
card_view:cardElevation="3dp">