Android Layer-List Drawable with two items not properly drawn and having wrong size

Question

I created a simple layer-list drawable which I want to use as an indicator weather or not a device is online. The drawable consists of an outer ring and an inner circle:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="14dp"
        android:height="14dp"
        android:gravity="center">
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@color/colorLightGray" />
        </shape>
    </item>
    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="center">
        <shape android:shape="oval">
            <solid android:color="@color/colorLightGray" />
        </shape>
    </item>
</layer-list>

In my layout xml, the drawable seems to be correct when I assign it as the source of my image view:

However if I run the code on a device, it looks like this:

Also I had to set width and height in my layout otherwise the image wouldn't show at all.

QUESTIONS:

• What do I have to do so I can use widht/height of wrap_content in my layout xml and configure the size in the layer-list?

Answer 1

try this layerlist drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center">
        <shape android:shape="oval">
            <size
                android:width="14dp"
                android:height="14dp" />
            <stroke
                android:width="1dp"
                android:color="@color/colorLightGray" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="oval">
            <size
                android:width="10dp"
                android:height="10dp" />
            <solid android:color="@color/colorLightGray" />
        </shape>
    </item>
</layer-list>