Using a layer-list with multiple circular items

I am trying to make a shape that looks roughly like

I understand that I need a layer-list with 3 items stacked on top of each other with two of them being offset from their top-left and bottom-right. Here is my code for this

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

    <item android:right="8dp" android:bottom="8dp">
        <shape android:shape="oval">
            <solid android:color="@color/color_white" />
        </shape>
    </item>


    <item android:top="8dp" android:left="8dp">
        <shape android:shape="oval">
            <solid android:color="@color/color_gray" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="@color/color_circle" />
        </shape>
    </item>

</layer-list>

But I am not getting the correct output. More specifically, the white and black shapes are smaller in size than the middle one as you can see here

I don't know why this is happening. Can anyone please help me out? Thanks

Try specifying the width and height for each shape:

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

    <item android:right="8dp" android:bottom="8dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
            <size android:width="50dp" android:height="50dp" />
        </shape>
    </item>


    <item android:top="8dp" android:left="8dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/black" />
            <size android:width="50dp" android:height="50dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/darker_gray" />
            <size android:width="50dp" android:height="50dp" />
        </shape>
    </item>

</layer-list>

This gives me the following image: