androidxmlshapesandroid-elevation

How to add elevation for shape?


Now i have next rectangle:

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

    <corners android:radius="28dp" />

    <gradient
        android:endColor="#FFFFFF"
        android:gradientRadius="20dp"
        android:startColor="#FFFFFF"
        android:type="linear" />

    <size
        android:width="106dp"
        android:height="106dp" />

    <stroke
        android:width="1dp"
        android:color="#0189ff" />
</shape>

And have next result:

enter image description here

Q: How can I add a shadow/elevation instead of stroke?


Solution

  • you can not directly apply shadow in place of stroke.

    For that, you need to customized your XML using <layer-list></layer-list>

    Like

        <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <!-- Drop Shadow Stack -->
        <item>
            <shape>
    
                <padding
                    android:bottom="@dimen/_3sdp"
                    android:left="@dimen/_1sdp"
                    android:right="@dimen/_3sdp"
                    android:top="@dimen/_1sdp" />
                <solid android:color="#00dff2e4" />
    
                <corners android:radius="@dimen/_5sdp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding
                    android:bottom="@dimen/_3sdp"
                    android:left="@dimen/_1sdp"
                    android:right="@dimen/_3sdp"
                    android:top="@dimen/_1sdp" />
    
                <solid android:color="#10dff2e4" />
    
                <corners android:radius="@dimen/_50sdp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding
                    android:bottom="@dimen/_3sdp"
                    android:left="@dimen/_1sdp"
                    android:right="@dimen/_3sdp"
                    android:top="@dimen/_1sdp" />
    
                <solid android:color="#20dff2e4" />
    
                <corners android:radius="@dimen/_50sdp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding
                    android:bottom="@dimen/_3sdp"
                    android:left="@dimen/_1sdp"
                    android:right="@dimen/_3sdp"
                    android:top="@dimen/_1sdp" />
    
                <solid android:color="#30dff2e4" />
    
                <corners android:radius="@dimen/_50sdp" />
            </shape>
        </item>
        <item>
            <shape>
                <padding
                    android:bottom="@dimen/_3sdp"
                    android:left="@dimen/_1sdp"
                    android:right="@dimen/_3sdp"
                    android:top="@dimen/_1sdp" />
    
                <solid android:color="#50dff2e4" />
    
                <corners android:radius="@dimen/_50sdp" />
            </shape>
        </item>
    
        <!-- Background -->
        <item>
            <shape>
                <solid android:color="@android:color/white" />
    
                <corners android:radius="@dimen/_50sdp" />
            </shape>
        </item>
    
    </layer-list>
    

    output