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

问题

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 it's android:src property. For it's 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:

Here's the shadow image if anyone needs:

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/26707332/how-to-add-shadow-using-a-drawable-behind-solid-color-shape-in-xml

标签

android

xml

drawable

layer-list