How to add a blurred drop shadow to a button?

问题

I need to add blurred drop shadow to my button:

I tried to create background with layer-list xml drawable, but it not looks like blur.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="45dp" />
            <padding
                android:bottom="2dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <stroke
                android:width="6dp"
                android:color="#007879E8" />

        </shape>
    </item>
    //////   10 more items
        <item>
        <shape>
            <corners android:radius="45dp" />
            <padding
                android:bottom="2dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <stroke
                android:width="6dp"
                android:color="#177879E8" />


        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <corners android:radius="45dp" />
            <stroke
                android:width="2dp"
                android:color="@color/main_purple_text_color" />
        </shape>
    </item>

</layer-list>

Also i tried to use background element behind button with blured png but it uses to many resources and i cannot create selector to change background on hover or click.

I need to have single background file for button and use selector to change blur and gradient on hover/click. Any ideas how to achieve such effect with Android SDK ?

UPDATE 1

Thanks everybody for answers, but I'm not asking how to create gradient. I've already done this. I need to create blurred drop-shadow.

回答1:

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.

回答2:

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

回答3:

You can do it by Graident

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient 
    android:startColor="#6586F0"
    android:centerColor="#D6D6D6"
    android:endColor="#4B6CD6"
    android:angle="90"/>
<corners 
    android:radius="0dp"/>

回答4:

Create a drawable "round_corner.xml"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="360"
            android:startColor="#8A88F3"
            android:endColor="#B96AE8"
            android:type="linear" />

        <corners android:bottomLeftRadius="24dp"
            android:bottomRightRadius="24dp"
            android:topLeftRadius="24dp" android:topRightRadius="24dp" />
    </shape>
</item>
</selector>

in Activity set a button in xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_language_select_save"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/round_corner_spiner"
        android:paddingLeft="130dp"
        android:paddingRight="130dp"
        android:text="Vlad[enter image description here][1]"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:visibility="visible" />
</RelativeLayout>

Helpful links

Hope this helps you

回答5:

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.

来源：https://stackoverflow.com/questions/47674828/how-to-add-a-blurred-drop-shadow-to-a-button

标签

android

gradient

blur

dropshadow