Add spreading Shadow to the bottom of button Android

Question

I searched about the shadow button (shown below) but haven't found the desired result. I want same as shown in the image below.

I tried this also How to provide shadow to Button.

I also tried elevation and translation Z (z) android method for shadow but nothing helped. Please guide me through this. Thank you.

http://stackoverflow.com/questions/15333529/how-to-provide-shadow-to-button?noredirect=1&lq=1 — ThanhTranIT, Nov 30 '16 at 10:27
@ThanhTranIT Already try this link but not same as my given image. — Nabeel Hafeez, Nov 30 '16 at 10:31
one quick solution ,use 9.patch images for this, tell designer to create that type of image with bottom shadow. — Radhey, Nov 30 '16 at 10:34
refer sites from http://stackoverflow.com/questions/7426518/bad-patches-in-9-patch-file this to create .9patch — Radhey, Nov 30 '16 at 10:50
To add Radhey's suggestion. you can use this site to build 9 patch shadows http://inloop.github.io/shadow4android/ — Ajith Pandian, Nov 30 '16 at 10:57
@user7856586 Yes I did with android elevation shadow line android:elevation ="24dp" in xml. — Nabeel Hafeez, Oct 11 '18 at 10:11
Thanks, here you can find my [solution](https://stackoverflow.com/a/52736354/7856586) — Roman Soviak, Oct 11 '18 at 10:42

score 2 · Accepted Answer · edited Aug 12 '21 at 13:57

2

Create your own xml file in drawable folder and set in your button background.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="-6dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="-6dp"
        android:right="-6dp"
        android:top="-6dp">

    </item>

    <item
        android:bottom="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:top="-6dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</layer-list>

edited Aug 12 '21 at 13:57

Boken

4,825
10
32
42

answered Nov 30 '16 at 11:44

Umesh

86
8

its show dialog shadow but I use own pink color shadow with rounded corner. How it implement? – Nabeel Hafeez Nov 30 '16 at 12:11
Change your solid color whatever you want. – Umesh Nov 30 '16 at 12:30
3

I am not say about base color. I say about background shadow of dialog is black but i want pink. and dialog shadow not spread like my given image. – Nabeel Hafeez Nov 30 '16 at 12:43
5

How to change color of shadow? – Roman Soviak Sep 24 '18 at 18:28

score 1 · Answer 2 · answered Oct 24 '18 at 18:22

Set your button's attributes to

android:background="@android:drawable/dialog_holo_light_frame"
android:backgroundTint="@color/cool"

The tint is for api 21+ but you can walk around this programmically using

button.getBackground().mutate().setColorFilter(parseColor(tintColor), PorterDuff.Mode.SRC_ATOP);

score -1 · Answer 3 · edited Aug 12 '21 at 14:00

use this code

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/your_btncolor" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item
        android:bottom="-15dp"
        android:left="-5dp"
        android:right="-5dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/your_btn_shadowcolor" />
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>

Add spreading Shadow to the bottom of button Android

3 Answers3