How to add shadow using a drawable behind solid color shape in xml?

Question

I have a .png image which is a circular shape and is just a shadow. What I have is an ImageButton which has an image for its android:src property. For its background I can have an xml file in drawable file. What I want now is to have the shadow image which is a png to go behind another solid shape -> android:shape="oval".

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

    <item android:drawable="@drawable/shadowimg" />

    <item>
        <shape android:shape="oval">

            <solid
                android:color="#d63a33"/>

            <size
                android:width="70dp"
                android:height="70dp"/>
        </shape>
    </item>
</layer-list>

As you see in the code I am adding an item with the shadow image with the android:drawable property. However this does not let the shadow show. It simply shows the red circle shape. But I want the shadow image behind the solid red circle shape. From my tiny knowledge of layer-list the top item goes in the back and the one on bottom comes first.

UPDATE: After moving the image shadow to bottom I got the effect however the size of the solid red circle shape is too big and changing the size doesn't change the size.

UPDATED Code:

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

    <item>
        <shape android:shape="oval">

            <solid
                android:color="#d63a33"/>

            <size
                android:width="5dp"
                android:height="5dp"/>
        </shape>
    </item>
    <item android:drawable="@drawable/shadowimg" />
</layer-list>

**** UPDATE 2: **** I noticed when I remove <item android:drawable="@drawable/shadowimg" /> I can change size of solid circle shape but when I add this it defaults to a bigger size.

This is what happens:

enter image description here

Here's the shadow image if anyone needs:

enter image description here

Basically the "UPDATED Code:" is an xml file in drawable folder and in my activity there is an `ImageButton`. It has a totally seperate image for its `android:src` and for `android:background` its the xml drawable. And yes clean and rebuild shows no change — someguy234, Nov 03 '14 at 03:42
Have you tried using the selector? http://stackoverflow.com/questions/8339529/android-using-layer-list-for-button-selector — T D Nguyen, Nov 03 '14 at 03:55
@NguyenDoanTung Using selector is for different button states. Right now I am just worrying about the default state. — someguy234, Nov 03 '14 at 03:59

T D Nguyen · Answer 1 · 2014-11-03T04:20:37.270

0

I think this should be your solution:

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

   <item>
    <shape android:shape="oval" >
        <solid android:color="#d63a33" />

        <size
            android:height="5dp"
            android:width="5dp" />
    </shape>
 </item>

 <item>
    <bitmap android:src="@drawable/shadowimg" />
 </item>

 <item>
    <shape android:shape="oval" >
        <solid android:color="#00000000" />

        <size
            android:height="5dp"
            android:width="5dp" />
    </shape>
 </item>

 </layer-list>

I added another transparent layer with the desired size.

edited Nov 03 '14 at 04:20

answered Nov 03 '14 at 04:13

T D Nguyen

7,054
4
51
71

unfortunately it is still the same. I have also added the shadow image I am using if you want to test – someguy234 Nov 03 '14 at 04:29
So the issue comes from android:src. The background dimension was controlled by the top layer (android:src). You can either remove it, or just move it to layer list, or create button in Photoshop (easiest way). – T D Nguyen Nov 03 '14 at 20:10
Removing `android:src` property only removes the plus button the rest still stays the same. – someguy234 Nov 03 '14 at 21:20

Hardik · Answer 2 · 2015-05-28T07:28:23.450

Actually the issue is in the shadow you are using, the shadow itself leaves some padding. so what we can do is, leave some space in the solid color we are filling in the first item by using stroke.

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="oval" >
            <solid android:color="#d63a33" />

            <stroke
                android:width="7dp"
                android:color="#00000000" />
        </shape>
    </item>
    <item android:drawable="@drawable/shadowimg"/>
</layer-list>

and then use with 30dp of height and 30dp of width, like

<TextView
    android:id="@+id/titleText"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_centerVertical="true"
    android:layout_marginLeft="16dp"
    android:background="@drawable/circle_white"
    android:fontFamily="sans-serif-thin"
    android:gravity="center"
    android:text="Hi"
    android:textColor="#FF000000"
    android:textSize="16sp" />

if you want to increase the height and width of the view, simply increase the width of the stroke too..

How to add shadow using a drawable behind solid color shape in xml?

2 Answers2

Linked