I'm trying to create a hollow circle in xml, using the ring shape in xml. However I end up getting a line that seems to showcase the radius of the circle, starting from the middle of the ring and going to the right.
xml code for the shape I'm trying to achieve:
<?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="2"
android:useLevel="false">
<solid android:color="@android:color/transparent"/>
<stroke
android:width="5dp"
android:color="#FFFFFF"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
Again, the problem is that I am getting a clear and distinct line starting in the middle of the shape and going right to the edge of the hollow circle I have, the transparency works but I have no idea what is causing the line in the middle. Any help is appreciated.
You can use a ring shape, but you should use solid
instead of stroke
. You can experiment with android:innerRadius
and android:thicknessRatio
until the shape looks the way you want.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="10dp"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="@android:color/holo_red_dark"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
stroke
looks weird on rings because the shape is created as an area of which the edge is described by an uninterrupted path. The solid color is used to fill the area, the stroke color is applied to the edge.