Anirudh Anirudh - 4 months ago 66
Android Question

Transparent circle with border

I am trying to create a circle with only a border using XML in android:

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

<stroke android:width="1dp"
android:color="#000000"/>

</shape>


The code I've used is posted above. However, I get a solid disk and a not a ring. I would like to get the output using just XML and not canvas. What am i doing wrong?

Thanks.

EDIT:
Got it to work thanks to the answer below. Heres my final code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
android:useLevel="false" >

<solid android:color="@android:color/transparent" />

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

<stroke android:width="1dp"
android:color="#FFFFFF"/>

</shape>

Answer

Try something like this

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray" />
</shape>

Update: made android:thicknessRatio="2" to give full circle (using Nexus 5 - Lollipop)

Comments