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?

Solution 1

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:

Solution 2

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.

Solution 3

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>

Solution 4

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.

Solution 5

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>

View more solutions

Comments

[Abhishek]

Inside circle is not appearing at center... Is that need any modification in the code...?

[Testing Here]

android:height and android:width require API 23+ for shapes. Use the <size> tag instead for older devices.

[Albert Vila Calvo]

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 <padding> to the larger circles, which should not be <solid> but have only <stroke>. Or better: if you only need 2 circles just use a single circle with an inner <solid> and an outer <stroke>.

[Nizam]

Nice and simple solution.

[Trupti Nasit]

Thanks. It helped me. I was looking for 3 layers of circle one inside another