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?

Answer 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: