1

I'm trying to create a circle button with a yellow ring around it. I'm trying to use layer list as a drawable resource file and to have the circle button in the background and the ring on top.

However, no matter what I try, the ring isn't being drawn on top of the circle. Only the circle appears.

    <?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="16dp"/>
            <solid android:color="@color/blue_button"/>
            <size android:width="32dp" android:height="32dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="ring" android:innerRadius="50dp" android:useLevel="false" android:thickness="16dp">
            <solid android:color="@color/black"/>
        </shape>
    </item>
</layer-list>

When I try to isolate the ring shape, I can see it. But when I combine it with the circle, all I see is the circle. Adjusting thickness or innerRadius didn't seem to help.

I'm not sure what I'm doing wrong here. The ring is being drawn last so it should be on top. Can anyone help?

SmallGrammer
  • 893
  • 9
  • 19

1 Answers1

1

Can you give this a try :

<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:height="50dp" android:width="50dp" android:gravity="center">
    <shape
        android:shape="oval">
        <solid
            android:color="#2323ff"/>
    </shape>
</item>
<item android:height="48dp" android:width="48dp" android:gravity="center">
    <shape
        android:shape="oval"  >
        <solid
            android:color="#000000"/>
    </shape>
</item>
</layer-list>
MRX
  • 1,400
  • 3
  • 12
  • 32
  • This works, but eventually I'll need a gap between the button and ring. So two ovals overlapping won't work. Do you have any idea why my "rectangle" (circle) shape won't work with the ring? – SmallGrammer Feb 15 '21 at 04:58
  • can you post the final screenshot of what you need? – MRX Feb 15 '21 at 12:18
  • Something like [this](https://snipboard.io/SuhU0g.jpg). I'm planning to create an animation with the yellow ring pulsing outwards. So I need multiple drawables for each frame to create that effect. – SmallGrammer Feb 16 '21 at 02:55