Transparent circle with border
AndroidXmlGeometryTransparentAndroid Problem Overview
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>
Android Solutions
Solution 1 - Android
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)
Solution 2 - Android
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>
Solution 3 - Android
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>
Solution 4 - Android
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>
Solution 5 - Android
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>
Solution 6 - Android
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
Solution 7 - Android
<?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>
Solution 8 - Android
<?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>
Solution 9 - Android
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.
Solution 10 - Android
<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>
Solution 11 - Android
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>