Ring shape in android

Question

I have the following xml in drawable folder (circle_status.xml) to create a ring:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="15dp"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="#ababf2" />
</shape>

And I insert the drawable as a background for a RelativeLayout, as next:

<RelativeLayout
    android:id="@+id/RelativeLayout_Status"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/circle_status" />

The problem is that a circle appears in the RelativeLayout, not a ring.

Please upload screen shot of your result and your desired result — amalBit, Jun 20 '13 at 14:31
I can't post images, sorry :( But, it's simple, I have a circle and I'd like a ring. — suanido, Jun 20 '13 at 14:54
Add an image in any portal and share the link,. Only if i understand i may be of any help to u. — amalBit, Jun 20 '13 at 15:02
Your code make a ring in real devive (android 3.2) but a disk in Graphical Layout Editor in Eclipse. perhaps a bug with it? — SteveR, Jun 20 '13 at 15:23
No, I'm testing it in a real device and draw a circle not a ring. Thanks — suanido, Jun 20 '13 at 15:31
I also tested and I have a ring ... on what android version do you test? — SteveR, Jun 20 '13 at 15:39
SteveR you are rigth, I'm testing again today, and it work perfectly in a real device. Thanks — suanido, Jun 21 '13 at 07:43
I know I'm late, but I guess your emulator was too small and the thickness on shape was filling the ring... — António Paulo, Apr 01 '16 at 09:46

score 34 · Answer 1 · answered Jul 07 '15 at 15:14

34

Note that a ring is an oval without a fill. Just with a stroke. And the view holding it, should be a perfect square.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<stroke
    android:width="1dp"
    android:color="@color/blue" />
</shape>

And the view holding it

<ImageView
     android:layout_width="10dp"
     android:layout_height="10dp"
     android:src="@drawable/ring" />

answered Jul 07 '15 at 15:14

Reinherd

5,476
7
51
88

6

"A ring is an oval without a fill, just with a stroke" is just what I needed to know (and what wasn't clearly stated in developer docs). – Jonik Jun 13 '16 at 09:37
That's not true. There's a notion of an inner radius. – dcow Apr 29 '17 at 02:15
1

"Note that a ring is an oval without a fill !!" good sentence. never thought of it :D. it works better than ring shape :D – Amir Ziarati Sep 18 '17 at 07:22
1

Just a note, if you want to tint it, set a transparent solid color to prevent a full oval from appearing: `` – alexbchr Apr 17 '18 at 14:10

score 22 · Accepted Answer · answered Jun 21 '13 at 07:45

22

I answer myself.

It seems the problem is in the Graphical Layout Editor of Eclipse, the code works fine in a real device.

answered Jun 21 '13 at 07:45

suanido

751
1
7
12

I couldn't find an existing issue for this with Google, so I raised it here: https://code.google.com/p/android/issues/detail?id=92345 If you star that issue it is a tiny bit more likely to get fixed. :-) – Dan J Jan 01 '15 at 02:13

score 12 · Answer 3 · answered Feb 18 '15 at 11:01

12

This hack shows a ring on both device and Android Studio:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring" android:innerRadius="23dp" android:thickness="0dp">
    <stroke android:width="2dp" android:color="#ababf2" />
</shape>

answered Feb 18 '15 at 11:01

snodnipper

2,580
1
29
19

9

use also android:useLevel="false" or in API Level < 20 you'll get a mess – Stack Diego Apr 15 '15 at 14:09

ygngy · Answer 4 · 2015-05-01T11:06:47.597

5

You must use <stroke> tag instead of <solid> tag for ring in a <shape> tag. Using <solid> tag in a <shape> tag results a circle not a ring.

<solid> tag can be used for ring background color and <stroke> for ring body color.

edited May 01 '15 at 11:06

answered May 01 '15 at 10:42

ygngy

3,630
2
18
29

Ring shape in android

4 Answers4