XML Drawable creates an unintended line in the middle of my transparent ring shape

Question

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.

Answer 1

Just Replace the shape="ring" by shape="oval"

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
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>

Answer 2

You can use android:shape="oval" instead of android:shape="ring".

Answer 3

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.