How to draw a circular stroke inside a circle?

Question

I'm trying to achieve this effect, but I can't make the white circular stroke inside the circle. In my implementation, the white stroke appears outside the circle

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

            <stroke
                android:width="5dip"
                android:color="#ffffff" />
            <solid android:color="#f50000" />
        </shape>

    </item>

</layer-list>

Expected output:-

https://stackoverflow.com/questions/21613308/how-to-draw-a-circle-inside-a-circle-using-android-xml-shapes — ADM, Feb 23 '18 at 16:27

score 5 · Accepted Answer · answered Feb 23 '18 at 16:42

I accomplished this using a <layer-list> and an <inset> oval shape:

<?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="#f50000"/>
        </shape>
    </item>

    <item>
        <inset
            android:insetTop="5dp"
            android:insetLeft="5dp"
            android:insetRight="5dp"
            android:insetBottom="5dp">
            <shape android:shape="oval">
                <stroke
                    android:color="#fff"
                    android:width="5dp"/>
            </shape>
        </inset>
    </item>
</layer-list>

You can control the inset amount and the stroke width by changing the values in the second item

gbaccetta · Answer 2 · 2018-02-23T16:51:46.687

0

here you go. Just modify a little your file to have two items and add a padding on the second. I hope it helps:

<?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="#f50000" />
        </shape>
    </item>
    <item
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"
        android:bottom="2dp">
        <shape
            android:shape="oval">
            <stroke
                android:width="2dp"
                android:color="#ffffff" />
        </shape>
    </item>
</layer-list>

edited Feb 23 '18 at 16:51

answered Feb 23 '18 at 16:41

gbaccetta

4,449
2
20
30

In this xml you have an oval, not a circle. – GiuseppeLabanca Feb 23 '18 at 17:04
@GiuseppeLabanca it's a flexible background, if you put it in a square container it will be a circle. If you want yo force it to be always square you can use the `size` stub but that is not always a good idea, dependeing on what use you plan for the layer-list... – gbaccetta Feb 23 '18 at 17:06

GiuseppeLabanca · Answer 3 · 2018-02-23T17:06:21.143

You need an xml like this (optimized):

<?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="#007" />
    </shape>
</item>
<item
    android:left="2dp"
    android:right="2dp"
    android:top="2dp"
    android:bottom="2dp">
    <shape
        android:shape="oval">
        <stroke
            android:width="1dp"
            android:color="#f00" />
        <size
            android:width="25dp"
            android:height="25dp" />
    </shape>
</item>
</layer-list>

or xml like this (not optimized):

<?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="#007" />
        <size
            android:width="25dp"
            android:height="25dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <stroke
            android:width="8dp"
            android:color="@android:color/transparent" />
        <solid android:color="#f00" />
        <size
            android:width="45dp"
            android:height="45dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <stroke
            android:width="10dp"
            android:color="@android:color/transparent" />
        <solid android:color="#007" />
        <size
            android:width="10dp"
            android:height="10dp" />
    </shape>
</item>
</layer-list>

for this result:

Try to optimize your drawables: you actually need **only 2** circles: one is filled and one is used for the "stroke". — Phantômaxx, Feb 23 '18 at 16:46
check my answer to achieve this in two drawables only. also instead of using size, you can add padding to the item. — gbaccetta, Feb 23 '18 at 16:50
It depends if the external and internal circles has the same colors. — GiuseppeLabanca, Feb 23 '18 at 16:50
@GiuseppeLabanca if they have different color, you just need to add a second solid element also in the second item — gbaccetta, Feb 23 '18 at 16:51
In the given example, they don't. It's a filled color and a ring over it. — Phantômaxx, Feb 23 '18 at 16:58
I edited my post with @gbaccetta 's hint forced to 25dp size — GiuseppeLabanca, Feb 23 '18 at 17:10

How to draw a circular stroke inside a circle?

3 Answers3