How to add a blurred drop shadow to a button? How to add a blurred drop shadow to a button? android android

How to add a blurred drop shadow to a button?


Well i found the solution: we need to create 9.png with blurred drop-shadow via this generator and pass it to drawable layer-list that contain button background gradient:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@drawable/blurred_9_path_png" />    <item>        <shape android:shape="rectangle" android:padding="10dp">            <corners android:radius="45dp" />            <gradient                android:angle="45"                android:endColor="@color/facebook_btn_fill_grad2"                android:startColor="@color/facebook_btn_fill_grad1"                android:type="linear" />            <padding                android:bottom="0dp"                android:left="0dp"                android:right="0dp"                android:top="0dp" />        </shape>    </item></layer-list> 

After that we can use such drawables with different 9.path blurred shadow to create selector.


I add this as background drawable (grey drop shadow):

<!-- Drop Shadow Stack --><item>    <shape>        <padding            android:bottom="1dp"            android:left="1dp"            android:right="1dp"            android:top="1dp" />        <solid android:color="#1f000000" />        <corners android:radius="30dp" />    </shape></item><item>    <shape>        <padding            android:bottom="1dp"            android:left="1dp"            android:right="1dp"            android:top="1dp" />        <solid android:color="#2f000000" />        <corners android:radius="30dp" />    </shape></item><item>    <shape>        <padding            android:bottom="1dp"            android:left="1dp"            android:right="1dp"            android:top="1dp" />        <solid android:color="#3f000000" />        <corners android:radius="30dp" />    </shape></item><!-- Background --><item>    <shape>        <solid android:color="@android:color/white" />        <corners android:radius="30dp" />    </shape></item>

Ensures the height/width/padding of textview large enough to contains above shadow 3dp (1dp+1dp+1dp for all colors from #3f000000 until #1f000000).


enter image description here

Create drawable shadow.xml file

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solid android:color="#E3D5FC" /><corners    android:radius="20dp"/><padding    android:bottom="1dp"    android:left="1dp"    android:right="1dp"    android:top="1dp" ></padding>

Create another drawable background.xml file

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/shadow" /><item>    <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="rectangle">        <gradient            android:angle="0"            android:centerColor="#9E7CEF"            android:endColor="#B070EB"            android:startColor="#8989F4" />        <corners android:radius="22dp" />        <size android:height="40dp"/>    </shape></item>

and use this file in xml as below.

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><Button    android:id="@+id/img_save"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="@drawable/background"    android:gravity="center"    android:text="BUTTON"    android:textAppearance="?android:attr/textAppearanceMedium"    android:textColor="@android:color/white"    android:layout_centerInParent="true"/></RelativeLayout>

Hope it Helps.