Want to make 3 circle same as shown in the figure, but only one stoke is not working in the circle shape xml, how do I figure it out?

Question

enter image description here

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

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

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

        <stroke android:color="#62DEF5" android:width="30dp"/>

        <stroke android:color="#4CCCF7" android:width="25dp"/>

    </shape>

 </item>

`

I think you need to use layers, perhaps this will help [Understanding Android's ](https://stackoverflow.com/questions/14436641/understanding-androids-layer-list) — MikeT, Jul 15 '17 at 07:00

score 2 · Accepted Answer · edited May 22 '18 at 16:50

try this using below code you can draw 4 circles

<?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="30dp"
            android:height="30dp"/>
    </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="25dp"
            android:height="25dp"/>
    </shape>
</item>
<item android:top="2dp"
    android:right="2dp"
    android:bottom="2dp"
    android:left="2dp"
    >
    <shape android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke android:color="@android:color/transparent"
            android:width="5dp"/>
        <solid android:color="#f000"/>
        <size
            android:width="20dp"
            android:height="20dp"/>
    </shape>
</item>

<item
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp"
    android:left="5dp"
    >
    <shape android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke android:color="@android:color/transparent"
            android:width="5dp"/>
        <solid android:color="#fff0"/>
        <size
            android:width="20dp"
            android:height="20dp"/>
    </shape>
</item>
</layer-list>

The strokes aren't needed, I guess. You can simplify your drawable. Anyway, +1. This is the correct answer. — Phantômaxx, Jul 15 '17 at 08:08
how does the z-order works here...anyways it worked thankz for the help. — Gaurav Rai, Jul 15 '17 at 09:43
The `z-order` works top-bottom. The *last* item added being the *closest* to the observer. — Phantômaxx, Jul 15 '17 at 10:42

Want to make 3 circle same as shown in the figure, but only one stoke is not working in the circle shape xml, how do I figure it out?

1 Answers1