Develop Reference

How do you create a layer-list with two solids next to each other?

I'm trying to create a drawable with two shapes next to each other using layer-list, how would I do it?

You can use the following code to have the drawable you want(Change the colors and height as you want)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<size
android:width="5dp"
android:height="5dp" />
<solid android:color="#color/colorAccent"/>
</shape>
</item>
<item android:gravity="right">
<shape android:shape="rectangle">
<size
android:width="1dp"
android:height="5dp" />
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
</layer-list>

How to create 3 shape layer list top to bottom

Hi guys so i created 2 xmls for 3 shapes. 2 shapes are rectangle 1 is ring.
First XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/colorGrey"/>
<size android:height="40dp" android:width="10dp"/>
</shape>
Second XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorWhite"/>
<size android:height="40dp" android:width="40dp"/>
</shape>
Then i created a layer-list drawable like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/rectangle"
android:gravity="center" />
</item>
<item android:top="40dp">
<bitmap android:src="#drawable/circle"
android:gravity="center" />
</item>
<item android:top="40dp">
<bitmap android:src="#drawable/rectangle"
android:gravity="center" />
</item>
</layer-list>
My main goal was to create this. Main problem is they are stacking top of each other.

Try this (I've assumed a 40x40dp image size based on your code and a white background based on your image):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/white"/>
<size android:height="40dp" android:width="40dp"/>
</shape>
</item>
<item
android:right="18dp"
android:left="18dp">
<shape
android:shape="rectangle">
<solid android:color="#color/green"/>
<size android:height="40dp" android:width="4dp"/>
</shape>
</item>
<item android:gravity="center">
<shape
android:shape="oval">
<solid android:color="#color/green"/>
<size android:height="15dp" android:width="15dp"/>
<stroke android:width="2dp" android:color="#color/white"/>
</shape>
</item>
</layer-list>

How can I create the following shape in Android?

I am trying to create a following shape in android.
I tried following code but it's only for changing the corners
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<gradient
android:startColor="#00EBCF"
android:endColor="#00BEEC"
android:angle="180"
android:type="linear" />
<corners
android:bottomLeftRadius="80dp"
android:bottomRightRadius="80dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
What do I need to make changes in code to achieve the above shape?
Edit1
As per the answer I used following code (modifications in layout height):
<?xml version="1.0" encoding="utf-8"?>
</shape>
</item>
<item
android:width="1500dp"
android:height="200dp"
android:top="95dp">
<shape android:shape="oval">
<solid android:color="#36D6E9" />
</shape>
</item>
But when I am using this layout as a background for LinearLayout. It's showing me this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/header_shape_rect">

use this as an example
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="200dp">
<shape android:shape="rectangle">
<solid android:color="#ccc"/>
</shape>
</item>
<item android:height="200dp" android:top="95dp" android:width="1500dp" >
<shape android:shape="oval">
<solid android:color="#ccc"/>
</shape>
</item>
</layer-list>

Shape with outer stroke only

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#ffffff"/>
<stroke android:width="30dp"
android:color="#51000000"
/>
</shape>
It gives a "half-inner-half-outer" stroke.
What I need is outer semitransparent stroke only. Can it be done?
What I have is
What I need is
Thanks

you can check this shape created using layer list with it's items.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="oval" >
<solid android:color="#fff" />
</shape>
</item>
<item >
<shape android:shape="oval">
<solid android:color="#android:color/transparent" />
<stroke
android:width="50dp"
android:color="#30000000" />
</shape>
</item>
</layer-list>

if you add alpha for stroke color the inner half is without transparent and outer is transparent.this is how stroke color works.if you don't want inner circle use color without Alpha and adjust Hexcode.

Try adding android:innerRadius="0dp" for shape attribute -
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
>
<solid android:color="#ffffff"/>
<stroke android:width="4dp"
android:color="#51000000"
/>
</shape>

This is Android studio XML preview bug.look like The image you shown above from Android studio xml preview.actually there is no inner and outer layer.

I've found no way to do that other than the following:
<?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="#android:color/transparent" />
<stroke
android:width="#dimen/stroke_width"
android:color="#33000000" />
</shape>
</item>
<item >
<shape android:shape="oval" >
<solid android:color="#fff" />
<stroke
android:width="#dimen/stroke_width"
android:color="#android:color/transparent">
</stroke>
</shape>
</item>
</layer-list>

Try This: (Change dimens and colors to fit your needs)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="#dimen/default_stroke_size_small" android:color="#color/colorDimBlack"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:width="#dimen/default_stroke_size_small" android:color="#android:color/transparent"/>
<solid android:color="#color/colorWhite"/>
</shape>
</item>
</layer-list>

update your code to this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffffff" />
<stroke
android:width="30dp"
android:color="#000000" /> <--- this line you have to change
</shape>

You are missing one f in your first color. Thus it's creating a half visible pattern
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#fffffff"/>
<stroke android:width="30dp"
android:color="#51000000"
/>
</shape>

Add a background image to shape in XML Android

How do you add a background image to a shape? The code I tried below but no success:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
//here is where i need to set the image
<solid android:color="#drawable/button_image"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>

Use following layerlist:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" android:padding="10dp">
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</item>
<item android:drawable="#drawable/image_name_here" />
</layer-list>

I used the following for a drawable image with a circular background.
<?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="#color/colorAccent"/>
</shape>
</item>
<item
android:drawable="#drawable/ic_select"
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp"/>
</layer-list>
Here is what it looks like

This is a circle shape with icon inside:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ok_icon"/>
<item>
<shape
android:shape="oval">
<solid android:color="#color/transparent"/>
<stroke android:width="2dp" android:color="#color/button_grey"/>
</shape>
</item>
</layer-list>

This is a corner image
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img_main_blue"
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<item>
<shape
android:padding="10dp"
android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="5dp"
android:color="#color/white" />
</shape>
</item>
</layer-list>

I used the following for a drawable image with a border.
First make a .xml file with this code in drawable folder:
<?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="#color/orange"/>
</shape>
</item>
<item
android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp">
<shape android:shape="oval">
<solid android:color="#color/white"/>
</shape>
</item>
<item
android:drawable="#drawable/messages" //here messages is my image name, please give here your image name.
android:bottom="15dp"
android:left="15dp"
android:right="15dp"
android:top="15dp"/>
Second make a view .xml file in layout folder and call the above .xml file with this way
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/merchant_circle" /> // here merchant_circle will be your first .xml file name

Here is another most easy way to get a custom shape for your image (Image View). It may be helpful for someone. It's just a single line code.
First you need to add a dependency:
dependencies {
compile 'com.mafstech.libs:mafs-image-shape:1.0.4'
}
And then just write a line of code like this:
Shaper.shape(context,
R.drawable.your_original_image_which_will_be_displayed,
R.drawable.shaped_image_your_original_image_will_get_this_images_shape,
imageView,
height,
weight);