How to create button shadow in android material design style

Question

New material design guidelines introduce elevated buttons which are dropping nice shadow. According to the preview SDK documentation there will be elevation attribute available in new SDK. However, is there any way to achieve similar effect now?

Answer 1

This worked for me.

Layout having button

<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/button_size"
    android:layout_height="@dimen/button_size"
    android:background="@drawable/circular_button_ripple_selector"
    android:textAppearance="?android:textAppearanceLarge"
    android:textColor="@color/button_text_selector"
    android:stateListAnimator="@anim/button_elevation"/>

drawble/button_selector.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true"
          android:drawable="@drawable/button_selected"/>

    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed"/>

    <item android:drawable="@drawable/button"/>

</selector>

anim/button_elevation.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="2dip"
            android:valueTo="4dip"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="4dip"
            android:valueTo="2dip"
            android:valueType="floatType" />
    </item>
</selector>

If you have a button in rectangular shape then you are done here. But if you have circular or oval shaped button then it would be looking like,

To remove corners from circular or oval shaped button add this code to your .java file.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ...........
    int buttonSize = (int) getResources().getDimension(R.dimen.button_size);
    Outline circularOutline = new Outline();
    circularOutline.setOval(0, 0, buttonSize, buttonSize);

    for (int i = 0; i < MAX_BUTTONS; i++) {
        Button button = ......
        .......
        button.setOutline(circularOutline);
        ........
    }
    .....
}

Angular shape removed!! Now, it would look exactly like