Layer Drawable/Layer list is not drawing shapes on top of each other

Question

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?

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