How to create 3 shape layer list top to bottom

Question

Hi guys so i created 2 xmls for 3 shapes. 2 shapes are rectangle 1 is ring.

First XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/colorGrey"/>
<size android:height="40dp" android:width="10dp"/>
</shape>

Second XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval">
<solid android:color="@color/colorWhite"/>
<size android:height="40dp" android:width="40dp"/>
</shape>

Then i created a layer-list drawable like this

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/rectangle"
            android:gravity="center" />
    </item>
    <item android:top="40dp">
        <bitmap android:src="@drawable/circle"
            android:gravity="center" />
    </item>
    <item android:top="40dp">
        <bitmap android:src="@drawable/rectangle"
            android:gravity="center" />
    </item>
    </layer-list>

My main goal was to create this . Main problem is they are stacking top of each other.

Answer 1

Try this (I've assumed a 40x40dp image size based on your code and a white background based on your image):

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
         <shape
             android:shape="rectangle">
             <solid android:color="@color/white"/>
             <size android:height="40dp" android:width="40dp"/>
         </shape>
     </item>
     <item
         android:right="18dp"
         android:left="18dp">
         <shape
             android:shape="rectangle">
             <solid android:color="@color/green"/>
             <size android:height="40dp" android:width="4dp"/>
         </shape>
     </item>
     <item android:gravity="center">
         <shape
             android:shape="oval">
            <solid android:color="@color/green"/>
            <size android:height="15dp" android:width="15dp"/>
            <stroke android:width="2dp" android:color="@color/white"/>
        </shape>
    </item>
</layer-list>