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?

enter image description here

This answer details how to do it with a 9 patch image: http://stackoverflow.com/questions/4406524/how-to-set-shadow-to-a-view-in-android/14196186#14196186 — Brittany, Aug 18 '14 at 00:45
@milano Have you solved this yet? `setElevation` or `ViewCompat.setElevation`? — Jared Burrows, Feb 14 '15 at 05:14

Apurva · Accepted Answer · 2015-07-28T14:13:24.240

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,

enter image description here

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

enter image description here

score 0 · Answer 2 · answered Feb 24 '15 at 13:25

0

You can use 9-patch images, with shadows. Put the image in drawable--xxhdpi and set it as background on the button or other element.

android:background="@drawable/shadow_bg"

answered Feb 24 '15 at 13:25

Gjoko Bozhinov

1,137
11
15

This will not create dynamic shadows that change on touch. – Sanket Berde Jun 07 '15 at 07:13

score 0 · Answer 3 · answered Feb 24 '15 at 13:41

0

Or you could use CardView as a Button and use its CardView as a Button and its setCardElevation method. Combined with touch events and ValueAnimator, you could get nice animated shadow below the button.

answered Feb 24 '15 at 13:41

Michał Kisiel

1,050
10
12

How to create button shadow in android material design style

3 Answers3