How to draw a circle inside a circle using Android xml shapes?

Question

I'm trying to make a thumb for a seekbar for my app, and I want to have an inner circle surrounded by a different, larger (semi-transparent) outer circle. I'm trying to use layer-list, but I'm having issues. Below is my code...

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

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

<item>
    <shape
        android:shape="oval" >
        <solid android:color="#f00" />

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

</layer-list>

I would expect to see a small red circle on top of a larger blue circle, but all I'm seeing is the small red circle. Does anyone have any ideas?

What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method. — jas7457, Feb 06 '14 at 20:35
Have you seen/tried this?: http://stackoverflow.com/questions/4413652/nested-shapes-in-android-sdk — turbo, Feb 06 '14 at 20:38
That is just using the layer-list, like I'm doing. I noticed if I set the `android:top="3dp" android:left="3dp"` on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the `` attributes above. They both seem to default to whichever size is larger. — jas7457, Feb 06 '14 at 20:47

Sean Barbeau · Answer 1 · 2015-08-19T21:52:12.883

The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.

For example, this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
    <shape android:shape="oval">
        <solid android:color="#00f"/>
        <size
                android:width="15dp"
                android:height="15dp"/>
    </shape>
</item>
<!-- Smaller red circle in front -->
<item>
    <shape android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke android:color="@android:color/transparent"
                android:width="5dp"/>
        <solid android:color="#f00"/>
        <size
                android:width="10dp"
                android:height="10dp"/>
    </shape>
</item>
</layer-list>

...looks like this:

enter image description here

Inside circle is not appearing at center... Is that need any modification in the code...? — Abhishek, Jun 17 '16 at 03:55
Note that this solution creates **overdraw** because it paints a solid circle on top of another solid circle. You can check that there is overdraw in the developer settings (Debug GPU Overdraw -> Show overdraw areas). You can a void this by setting some `` to the larger circles, which should not be `` but have only ``. Or better: if you only need 2 circles just use a single circle with an inner `` and an outer ``. — Albert Vila Calvo, Sep 10 '19 at 10:05

score 12 · Answer 2 · answered Jul 26 '15 at 11:35

It's late but maybe helpful, you can use padding for center circle.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="oval">
        <solid
            android:color="#00fff"/>
        <padding
            android:bottom="30dp"
            android:left="30dp"
            android:right="30dp"
            android:top="30dp"/>
        <stroke
            android:width="1dp"
            android:color="@color/holo_red_light"/>
    </shape>
</item>
<item>
    <shape
        android:shape="oval">
        <solid
            android:color="#00666666"/>

        <size
            android:width="120dp"
            android:height="120dp"/>
        <stroke
            android:width="1dp"
            android:color="@color/holo_red_light"/>
    </shape>

</item>
</layer-list>

Mightian · Answer 3 · 2019-01-08T20:18:49.930

11

I ended up here in search of drawing concentric circle found only answers with layer list approach so adding my answer with only using the shape, I hope it will help someone.

<shape android:shape="oval">
    <solid android:color="#FFF" />
    <size
        android:width="15dp"
        android:height="15dp" />
    <stroke
        android:width="6dp"
        android:color="#000" /> 
</shape>

And this is the outcome.

edited Jan 08 '19 at 20:18

answered Nov 20 '18 at 09:31

Mightian

6,853
3
37
50

Nice and simple solution. – Nizam Jun 04 '20 at 07:18

score 10 · Answer 4 · answered Sep 10 '19 at 10:24

In case you need to draw 3 or more circles follow this pattern:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
            <stroke
                android:width="20dp"
                android:color="#0000ff" />
        </shape>
    </item>
    <!-- Green circle in middle -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
            <stroke
                android:width="20dp"
                android:color="#00ff00" />
        </shape>
    </item>
    <!-- Smaller red circle at front -->
    <item>
        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

The result:

Note that unlike other answers here, this solutions does not paint circles on top of other circles, which avoids overdraw.

score 9 · Answer 5 · edited Jun 06 '15 at 13:42

hope it will help. This is drawable *.xml

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

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

              <solid android:color="#000" />
          </shape>
      </item>
      <item>
          <shape android:shape="oval">
              <padding
                  android:bottom="1dp"
                  android:left="1dip"
                  android:right="1dp"
                  android:top="1dp" />

              <solid android:color="#EEE" />
          </shape>
      </item>
    </layer-list>

scottyab · Answer 6 · 2015-10-26T17:56:04.437

I managed to solve this by setting the width and height of the <item> in the <layer-list>. Probably not as best practise, but seem ok as was for background of icon in list view that had fixed dimensions.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- larger circle at the back -->
    <item android:height="54dp" android:width="54dp" android:gravity="center">
        <shape
               android:shape="oval">

            <solid
                android:color="#0000FF"/>

            <!-- thicker outer boarder -->
            <stroke
                android:width="2dp"
                android:color="#000000"/>
        </shape>
    </item>


    <!-- inner circle -->
    <item android:height="40dp" android:width="40dp" android:gravity="center">
        <shape
               android:shape="oval"  >
            <solid
                android:color="#00FF00"/>

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

        </shape>
    </item>
</layer-list>

`android:height` and `android:width` require API 23+ for shapes. Use the `` tag instead for older devices. — Testing Here, Oct 19 '16 at 15:46

score 0 · Answer 7 · answered Mar 20 '18 at 09:13

Hope below code snippet helps :)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <!-- larger circle at the back -->
        <item>
            <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="#FFFFFF" />
                  <stroke
                      android:width="1dp"
                      android:color="#000000" /></shape>
        </item>

    <!-- inner circle -->
    <item  >
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:innerRadius="0dp"
               android:shape="ring"
               android:thicknessRatio="2.1"
               android:useLevel="false" >
            <solid android:color="#000000" />
            <stroke
                android:width="1dp"
                android:color="#FFFFFF" /></shape>
    </item>
</layer-list>

score 0 · Answer 8 · answered Jun 13 '18 at 09:47

0

this is a short version of Sean Barbeau's answer

<stroke
    android:width="1dp"
    android:color="@color/white" />
<solid android:color="@color/dark_blue" />

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

answered Jun 13 '18 at 09:47

Ankit Pandey

198
3
8

score 0 · Answer 9 · answered May 30 '19 at 13:01

Just you have to use Shap Attribute

xml code drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <stroke android:width="2dp" android:color="#B91969"/>
    <size android:width="@dimen/dim_16dp" android:height="@dimen/dim_16dp" />
    <solid android:color="#0f0" />
</shape>

Output

How to draw a circle inside a circle using Android xml shapes?

9 Answers9

Linked