Transparent circle with border

Question

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>

score 202 · Accepted Answer · edited Aug 18 '15 at 12:02

202

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)

edited Aug 18 '15 at 12:02

Mohamed Sobhy

385
1
5
17

answered Apr 19 '13 at 06:30

stinepike

54,068
14
92
112

8

I made it `android:thicknessRatio="2"` to be a closed ring (Nexus 5, Lollipop) – David Dec 22 '14 at 13:33
The area outside the circle is not showing up as transparent for me. – Paradox May 27 '18 at 15:15
@Paradox try imageview instead of button – Nikunj Patel Jan 03 '19 at 06:15

score 35 · Answer 2 · edited Jul 10 '18 at 17:56

use this it will work

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

<gradient
    android:centerX=".6"
    android:centerY=".40"
    android:endColor="@android:color/transparent"
    android:gradientRadius="20"
    android:startColor="@android:color/transparent"
    android:type="radial" />

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

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

</shape>

score 15 · Answer 3 · answered Jul 09 '16 at 16:11

Hollow

<?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="@color/indicator_unselected" />
    </shape>

Full

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

score 9 · Answer 4 · answered Feb 19 '19 at 10:37

The stroke effect can be achieved drawing a transparent oval with the stroke of a required color (#000 in the example):

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

score 3 · Answer 5 · answered Oct 06 '17 at 11:59

If you can use Vector drawables try this

<vector android:height="24dp" android:viewportHeight="512.0"
    android:viewportWidth="512.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFFFFF" android:fillType="evenOdd"
        android:pathData="M0,0L512,0L512,512L0,512L0,0ZM256,511C396.8,511 511,396.8 511,256C511,115.2 396.8,1 256,1C115.2,1 1,115.2 1,256C1,396.8 115.2,511 256,511Z"
        android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>

score 2 · Answer 6 · answered Apr 19 '13 at 06:43

2

You can use android inbuilt value for transparent as @android:color/transparent or use #0000 or #00000000

for above starting for 4 digit first was for alpha and in 8 digit value first two digit was for same as alpha.

When you just give 3 digit or 6 digit in color than default alpha value was ff you by passing in 4 digit or 8 digit value set that alpha of that color value

answered Apr 19 '13 at 06:43

Pratik

30,639
18
84
159

1

Hi Pratik, I didnt understand the alpha part of your answer. I added the line to the XML file. But still got the same result. – Anirudh Apr 19 '13 at 07:41
this alpha was used to set the opacity of color. If you set the 4 0's or 8 0's than it fully transparent, with the increase of first 2 digit in 8 0's value of that only increase the value of opacity – Pratik Apr 19 '13 at 07:45

score 2 · Answer 7 · answered Aug 07 '18 at 17:48

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

        <gradient
            android:endColor="@android:color/transparent"
            android:gradientRadius="20"
            android:startColor="@android:color/transparent" />

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

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

    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="oval" >

            <gradient
                android:endColor="@android:color/transparent"
                android:gradientRadius="20"
                android:startColor="@android:color/transparent" />

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

            <size
                android:height="100dp"
                android:width="100dp" />
        </shape>
    </item>
</layer-list>

score 1 · Answer 8 · answered Apr 19 '18 at 10:51

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

            <stroke
                android:width="4dp"
                android:color="@color/colorPrimaryDark" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item
        android:top="1dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">

        <shape android:shape="oval">
            <solid android:color="@color/colorRed" />
            <size android:height="@dimen/_100sdp"
                android:width="@dimen/_100sdp"></size>
        </shape>

    </item>

</layer-list>

score 0 · Answer 9 · answered Feb 19 '19 at 10:49

If you set the color to #00000000, the result will be transparent. You would want to do it this way if you wanted to change it in the future of development. If you wanted it to be red and partially transparent for example, it would be #ff000088 The last two numbers are the opacity. I do it this way to make future changes easier.

score 0 · Answer 10 · answered Jun 30 '20 at 10:25

<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:innerRadiusRatio="2"
     android:shape="ring"
     android:thicknessRatio="1"
     android:useLevel="false">

    <gradient
        android:type="radial"
        android:gradientRadius="8dp"
        android:endColor="@color/colorDarkPurple"
        android:elevation="5dp"
    />

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

score 0 · Answer 11 · answered May 13 '22 at 04:55

You can try setting background of image view with this drawable :

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

            <stroke
                android:width="4dp"
                android:color="@android:color/black" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item
        android:top="8dp"
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp">

        <shape android:shape="oval">
            <solid android:color="@android:color/black" />
            <size
                android:height="100dp"
                android:width="100dp" />
        </shape>

    </item>

</layer-list>

Transparent circle with border

11 Answers11

Linked