Develop Reference

Layer Drawable/Layer list is not drawing shapes on top of each other

I'm trying to create a circle button with a yellow ring around it. I'm trying to use layer list as a drawable resource file and to have the circle button in the background and the ring on top.
However, no matter what I try, the ring isn't being drawn on top of the circle. Only the circle appears.
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:radius="16dp"/>
<solid android:color="#color/blue_button"/>
<size android:width="32dp" android:height="32dp"/>
</shape>
</item>
<item>
<shape android:shape="ring" android:innerRadius="50dp" android:useLevel="false" android:thickness="16dp">
<solid android:color="#color/black"/>
</shape>
</item>
</layer-list>
When I try to isolate the ring shape, I can see it. But when I combine it with the circle, all I see is the circle. Adjusting thickness or innerRadius didn't seem to help.
I'm not sure what I'm doing wrong here. The ring is being drawn last so it should be on top. Can anyone help?

Can you give this a try :
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="50dp" android:width="50dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#2323ff"/>
</shape>
</item>
<item android:height="48dp" android:width="48dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#000000"/>
</shape>
</item>
</layer-list>

XML Drawable creates an unintended line in the middle of my transparent ring shape

I'm trying to create a hollow circle in xml, using the ring shape in xml. However I end up getting a line that seems to showcase the radius of the circle, starting from the middle of the ring and going to the right.
xml code for the shape I'm trying to achieve:
<?xml version="1.0" encoding="utf-8"?>
<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="#android:color/transparent"/>
<stroke
android:width="5dp"
android:color="#FFFFFF"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
Again, the problem is that I am getting a clear and distinct line starting in the middle of the shape and going right to the edge of the hollow circle I have, the transparency works but I have no idea what is causing the line in the middle. Any help is appreciated.

You can use a ring shape, but you should use solid instead of stroke. You can experiment with android:innerRadius and android:thicknessRatio until the shape looks the way you want.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="10dp"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#android:color/holo_red_dark"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>
stroke looks weird on rings because the shape is created as an area of which the edge is described by an uninterrupted path. The solid color is used to fill the area, the stroke color is applied to the edge.

Just Replace the shape="ring" by shape="oval"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
android:thicknessRatio="2"
android:useLevel="false">
<solid android:color="#android:color/transparent"/>
<stroke
android:width="5dp"
android:color="#FFFFFF"/>
<size
android:width="75dp"
android:height="75dp"/>
</shape>

You can use android:shape="oval" instead of android:shape="ring".

Shape with multiple circles

I want to draw a circle of color 1 inside a circle of color 2. Both of them have stroke and its inside is transparent. This should be used as a background of a button.
Something like this (but green and red are next to each other - no gap in between. Sorry, I don't have any graphical program where I could draw them so they're next to each other.)
Is there a way how to do it in XML ?
I was thinking of doing it using shape XML but layers are scaled so layers would be on top of each other so only 1 color would be visible.

You use a layer list with insets in order to avoid the inner circle to lurk out from the outer circle, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<inset android:inset="4dp">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_green_dark" />
</shape>
</inset>
</item>
</layer-list>
You set the size and background of the button like this:
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/red_green" />
It then looks like this:

Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size android:height="10dp" android:width="10dp"/>
<stroke
android:width="2dp"
android:color="#FF0000"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="1dp"
android:color="#00FF00"
/>
</shape>
</item>
</layer-list>
You can change the width and height of the size element to get a different ring width.

You can achieve this by defining two drawable resources both circle with different stroke colors and puting them in a layer-list drawable one on top of the other, with different ofsets which give then the effect you need:
Inner circle inner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorRed"
android:width="2dp"/>
</shape>
Outer circle outer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorGreen"
android:width="2dp"/>
</shape>
Button background background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/outer"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
android:left="0dp"
android:gravity="center"/>
<item android:drawable="#drawable/inner"
android:right="4dp"
android:top="4dp"
android:bottom="4dp"
android:left="4dp"
android:gravity="center"/>
</layer-list>
And this is final result

Android Drawable Cascade Rectangle and add Bitmap

I am new to use Android XML drawables. I am trying to define a simple drawable layerlist that has a gray stroke outer rectangle with a white stroke inner rectangle. The two rectangles should all have stroke width = 1 and the inner rectangle should be just 1px smaller than the outer one. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#android:color/darker_gray"/>
</shape>
</item>
<item android:bottom="1dp" android:top="1dp" android:right="1dp" android:left="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
But this doesn't work. I got a solid gray box as result... How should I change the code to make it like I described?
Also, I am trying to put a drawable #drawable/image to the center of the rectangle with a margin 50dp to the borders. How should I do that?
Thank you!

Creating a drawable rectangle in xml with one gradient on the top half and another on the bottom half

I'm trying to create a drawable in xml, a rectangle with one gradient on the top half, and another on the bottom half. This is NOT the way to do it, apparently:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#5a5a5a88"
android:endColor="#14141488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" android:top="80px">
<gradient
android:startColor="#5aff5a88"
android:endColor="#14ff1488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
</layer-list>
How can I do this, preferably in a way that makes it stretchable to any height?

If your goal is to have a gradient with a central color (starts at color A, transitions to B in the middle, then transitions to C at the end), add android:centerColor and android:centerY attributes to one of your <shape> elements and nuke the other. You can do the three-color gradient all in a single shape.

small bug for you, top attribute should be in item element ;)
it work:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#5a5a5a88"
android:endColor="#14141488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
<item android:top="80dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#5aff5a88"
android:endColor="#14ff1488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
</layer-list>