how to make a shape like the picture below using a shape drawable?

Question

I met a difficulty in Android programming, I want to make a shape like the picture "supposed.bmp" I uploaded. But I don't know how to do that, I only made one like "actual.bmp" I uploaded by the code below.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners
        android:radius="10dp"/>

    <solid
        android:color="#199900"/>

    <size
        android:height="20dp"
        android:width="20dp"/>

    <stroke
        android:width="2dp"
        android:color="#004A00"/>
</shape>

please help me to correct the code above, thank you very much!

Are you sure you uploaded the correct images I just see white squares in both images? — Mohammad Tabbara, May 02 '18 at 08:12
Oh I found that maybe it was a server problem and I uploaded new pics just now. — Yu Leung, May 02 '18 at 08:20

score 0 · Answer 1 · answered May 02 '18 at 08:36

try this

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

<item>
    <shape android:shape="oval">
        <solid android:color="#199900" />
        <size android:width="15dp" android:height="15dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <stroke android:width="1dp" android:color="@android:color/transparent" />
        <solid android:color="#ffffff" />
        <size android:width="10dp" android:height="10dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <stroke  android:width="6dp" android:color="@android:color/transparent" />
        <solid android:color="#199900" />
        <size android:width="10dp" android:height="10dp" />
    </shape>
</item>
</layer-list>

Md Sufi Khan · Accepted Answer · 2018-05-02T08:44:57.350

I hope this may help you:

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

    <item xmlns:android="http://schemas.android.com/apk/res/android">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">
            <solid
                android:color="#ffffff"/>

            <size
                android:height="20dp"
                android:width="20dp"/>

            <stroke
                android:width="10dp"
                android:color="#004A00"/>
        </shape>
    </item>

    <item xmlns:android="http://schemas.android.com/apk/res/android"
        android:bottom="30dp"
        android:left="30dp"
        android:top="30dp"
        android:right="30dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">
            <solid
                android:color="#004A00"/>

            <size
                android:height="20dp"
                android:width="20dp"/>
        </shape>
    </item>

</layer-list>

Edited:

You may avoid the size attribute.

Increase or decrease top, bottom, right, left value to make the inner circle smaller or larger.

Thank you very much! It really solved my problem. And one more problem occurred. When it comes to newer version of Android, when we press the radiobutton a pink shadow will appear. It will be strange if I use green radiobutton with pink shadow. I rather want to know how to remove the shadow. — Yu Leung, May 02 '18 at 08:52
If the answer helped you to solve your problem then please accept the answer first to help other people who might be face this problem in future. :) For your next problem I have to check it first. :) — Md Sufi Khan, May 02 '18 at 10:05
It didn't work if I use Selector, maybe you misunderstood my meanings. — Yu Leung, May 02 '18 at 16:54

score 0 · Answer 3 · answered May 02 '18 at 08:59

Try this

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="#0c720c"/>
        <size
            android:width="100dp"
            android:height="100dp"/>
    </shape>
</item>

<item>
    <shape android:shape="oval">
        <stroke android:width="12dp"
            android:color="@color/transparent"/>
        <solid android:color="#fff"/>
    </shape>
</item>

<item>
    <shape android:shape="oval">
        <stroke android:width="50dp"
            android:color="@color/transparent"/>
        <solid android:color="#0c720c"/>
    </shape>
</item>


</layer-list>

how to make a shape like the picture below using a shape drawable?

3 Answers3