Develop Reference

Custom Shape using layerlist in XML Android

How can I create below custom drawable shapes using layer-list in XML.

After couple of hours trying finally I am able to create this custom shape using layer-list.
1. /res/drawable/custom_shape_one.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="80dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:right="80dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<item
android:left="135dp">
<rotate android:fromDegrees="67">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:right="61dp"
android:bottom="78.8dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Right-Diagonal Border -->
<item
android:left="220dp">
<rotate android:fromDegrees="67">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape_one"/>
OUTPUT:
2. /res/drawable/custom_shape_two.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="80dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:left="80dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<item
android:right="135dp">
<rotate android:fromDegrees="293">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:left="61dp"
android:bottom="78.8dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Left-Diagonal Border -->
<item
android:right="220dp">
<rotate android:fromDegrees="293">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape_two"/>
OUTPUT:
3. /res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:right="90dp">
<rotate android:fromDegrees="67">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<item
android:left="90dp">
<rotate android:fromDegrees="293">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<item
android:right="200dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<item
android:left="200dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<!-- Top-Right Line -->
<item
android:right="180dp"
android:bottom="58.5dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Top-Right Line -->
<item
android:left="180dp"
android:bottom="58.5dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Left-Diagonal Line -->
<item
android:right="26dp">
<rotate android:fromDegrees="67">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
<!-- Right-Diagonal Line -->
<item
android:left="26dp">
<rotate android:fromDegrees="293">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~

Custom shape in android using xml

I am trying to draw a custom shape which I can use as a background for my layout. But I am not able to do so. Is it possible to draw a shape as below using xml in android. I am not getting how to cut the semicircle shape from the vertical centres of rectangle.

Use layer-list to make this custom shape drawable.
/res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Transparent Rectangle -->
<item>
<shape android:shape="rectangle">
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp" />
<size
android:width="300dp"
android:height="100dp" />
<solid android:color="#FFFFFF" />
</shape>
</item>
<!-- Left Half-Circle -->
<item
android:left="-10dp"
android:right="290dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
<!-- Right Half-Circle -->
<item
android:left="290dp"
android:right="-10dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
<!-- Middle Dotted Line -->
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="line">
<stroke
android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"
android:color="#ff00"/>
</shape>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~

In your case it might be worth to create a resizable bitmap (9-Patch drawable). Follow this guide.

try bellow xml. save it in drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#ffffff"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="1dp"
android:color="#000000"
/>
</shape>

It is better to use 9-Patch images. If you can create an image like above you can use https://romannurik.github.io/AndroidAssetStudio/nine-patches.html to create 9-patch image(define expandable area).

Try this xml file in drawable :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<solid android:color="#color/primary" />
<corners android:radius="50dp"/>
</shape>

Please refer the below xml, it may help you out
<?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="#android:color/black" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="200dp"
android:height="200dp" />
<solid android:color="#color/colorAccent" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="line">
<solid android:color="#android:color/black" />
<stroke android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"/>
</shape>
</item>
<item
android:bottom="103dp"
android:left="-10dp"
android:right="205dp"
android:top="103dp">
<shape android:shape="oval">
<size
android:width="3dp"
android:height="3dp" />
<solid android:color="#android:color/black" />
<stroke android:width="1dp" />
</shape>
</item>
<item
android:bottom="103dp"
android:left="205dp"
android:right="-10dp"
android:top="103dp">
<shape android:shape="oval">
<size
android:width="3dp"
android:height="3dp" />
<solid android:color="#android:color/black" />
<stroke android:width="1dp" />
</shape>
</item>
</layer-list>

Try below code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" />
<stroke
android:width="1dp"
android:color="#ED2A3C" />
</shape>

Widths of layered rectangles do not behave as expected

I am trying to achieve the above background with the following code:
<?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="#dddddd" />
<size android:width="0dp" android:height="0dp" />
<stroke
android:width="3dp"
android:color="#aaaaaa" />
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0.1dp"
android:topRightRadius="15dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#6bb726" />
<size android:width="3dp" android:height="0dp" />
</shape>
</item>
</layer-list>
However, setting rectangle widths does not seem to be working and the green rectangle is taking as much space as the grey rectangle.
Can anyone suggest improvements to my xml-defined shape?

Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="15dp">
<shape android:shape="rectangle" >
<solid android:color="#6bb726" />
<size android:width="3dp" android:height="0dp" />
</shape>
</item>
<item android:left="5dp" >
<shape android:shape="rectangle">
<solid android:color="#dddddd" />
<stroke
android:width="3dp"
android:color="#aaaaaa" />
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0.1dp"
android:topRightRadius="15dp" />
</shape>
</item>
</layer-list>
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="15dp">
<shape android:shape="rectangle" >
<solid android:color="#6bb726" />
<size android:width="3dp" android:height="0dp" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle" >
<solid android:color="#aaaaaa" />
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0.1dp"
android:topRightRadius="15dp" />
</shape>
</item>
<item android:left="5dp" android:top="3dp" android:bottom="3dp" android:right="3dp">
<shape android:shape="rectangle">
<solid android:color="#dddddd" />
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0.1dp"
android:topRightRadius="15dp" />
</shape>
</item>
</layer-list>

Button doesn't look activated

I want a button to look activated (transparent) from the start.
My selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" >
<shape>
<solid
android:color="#android:color/transparent" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="false" android:state_activated="false">
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
</shape>
</item>
And the code of the button:
<Button
android:background="#drawable/my_bg"
android:state_activated="true"
/>
The default color of the button is red, so I guess the problem is in android:state_activated="true". How can I solve this?

please use this it will help you
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#2d7ebb" />
<corners android:radius="5dp">
<stroke android:width="2dip" android:color="#2d7ebb" />
</corners>
</shape></item>
<item android:state_pressed="true"><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#2d7ebb" />
<corners android:radius="5dp">
<stroke android:width="2dip" android:color="#2d7ebb" />
</corners>
</shape></item>
<item><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#55acee" />
<stroke android:width="2dip" android:color="#55acee" />
<corners android:radius="5dp" />
</shape></item>
</selector>

How to make bottom border in drawable shape XML selector?

I'm trying to create a drawable shape with different states for my button. So I wrote this:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_pressed" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:state_focused="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_focused" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE" />
<stroke
android:width="1dp"
android:color="#color/NEGATIVE" />
<corners android:radius="4dp" />
</shape>
</item>
</selector>
Then in my button I use it as android:background="#drawable/btn_negative_selector"
However, I want to draw a bottom border to that shape, to be, something like 3 dp and of different color, but I can't figure out how to do it. I tried searching, but didn't find anything suitable for selector. Any suggestions, please?

First I'm separating the shapes to make them easier to manage.
This is your btn_negative_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#xml/rectangle_button_pressed" android:state_pressed="true"></item>
<item android:drawable="#xml/rectangle_button_focused" android:state_focused="true"></item>
<item android:drawable="#xml/rectangle_button" ></item>
</selector>
create folder called 'xml' in your res and save these shapes into it:
1) rectangle_button_pressed:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_pressed" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
2) rectangle_button_focused:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_focused" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
3) This one rectangle_button.xml will have a border at the bottom of it by defining a shape using <layer-list>. first <item> is bottom layer and last <item> is the top layer.
<?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/gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
<item android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
<corners android:radius="4dp"/>
</shape>
</item>
</layer-list>