Develop Reference

Shape layer-list composition

My goal is to have a drawable (shape) with this result:
What i tried so far:
triangle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="87%"
android:pivotY="140%"
>
<shape
android:shape="rectangle">
<size
android:height="24dp"
android:width="24dp"
/>
<solid
android:color="#color/green" />
<corners android:radius="1dp" />
</shape>
</rotate>
</item>
</layer-list>
result_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/triangle" />
<item
android:left="24dp"
>
<shape
android:shape="rectangle">
<size
android:height="24dp"
android:width="40dp"
/>
<solid
android:color="#color/c_white" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
As result im getting the rectangle not aligned with the triangle and the triangle is now a rectangle with some rotation.
How can I represent this image as drawable using shapes and layer-list ?

You can try using vector to achieve what you want:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="150dp"
android:height="50dp"
android:viewportHeight="50"
android:viewportWidth="150">
<path
android:fillColor="#ff008800"
android:pathData="M0,25 50,50 50,0z" />
<path
android:fillColor="#ffbb0000"
android:pathData="M50,0 50,50 150,50 150,0z" />
</vector>
Here is the result using it as background for a TextView:

Android: Draw shape with skewed corner

I want to use a background for my buttons. But when I use a png it slows down the app. Therefore I want to use a xml shape but I do not know how to make the corner cut (like on the picture).
By now I have the following shape which is just a rectangle:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_semi_transparent"/>
<padding android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
<margin android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
</shape>
How can I draw the bottom right corner?

You can try this,
skewed_background.xml
<?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="#3F8EEB" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="110"
android:pivotX="90%"
android:pivotY="90%"
>
<shape android:shape="rectangle" >
<solid android:color="#FFF" />
</shape>
</rotate>
</item>
</layer-list>
sample_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="vertical" >
<View
android:layout_width="200dp"
android:layout_height="50dp"
android:background="#drawable/triangle1"/>
</LinearLayout>
If you want to modify the skewed area you just need to change the value of fromDegrees, pivotX and pivotY value in the second item in skewed_background.xml.

This is exactly what you looking for
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:paddingRight="15dp"
android:textColor="#ffffff"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
bg.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="100dp"
android:height="40dp" />
<solid android:color="#13a89e" />
</shape>
</item>
<item
android:right="100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT

This will give you your desired result
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary"/>
<item android:top="-20dp"
android:bottom="-50dp"
android:left="350dp"
android:right="-120dp">
<rotate
android:fromDegrees="10"
android:pivotX="50%"
android:pivotY="0%">
<shape
android:shape="rectangle">
<solid
android:color="?android:colorBackground"/>
</shape>
</rotate>
</item>
</layer-list>

How to create rectangle background slightly bend from one side

Hi I want to draw a slightly bend divider line between two horizontally placed textview. I don't want to put any type of image in background. I have tried using xml drawable but my code doesn't work .
<?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="100dp"
android:height="40dp" />
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:right="100dp"
android:left="-180dp"
android:top="-25dp"
android:bottom="-42dp">
<rotate
android:fromDegrees="15">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
I want to design the layout showing in image.

You could create VectorDrawable in this case. Note that in the pre-lollipop versions the images would be generated anyway, otherwise use srcCompat.
Your vector drawable could look like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="36dp"
android:height="24dp"
android:viewportWidth="36.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF0"
android:pathData="M0,0 L0,24 L20,24 L36,0 L0,0 Z"/>
To provide more accuracy according to your needs you should edit it yourself
More about vectors
Simple start

You can create that shape like this way
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
>
<TextView
android:id="#+id/banner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TADAA!!!"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:textColor="#android:color/black"
android:background="#drawable/myshape"
/>
</LinearLayout>
myshape.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="100dp"
android:height="40dp" />
<solid android:color="#ff0" />
</shape>
</item>
<item
android:right="100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT

try this vector drawable in xml file
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="99.0"
android:viewportWidth="338.0">
<path
android:fillColor="#000000"
android:pathData="M0,45.5l0,40.5 163.5,0 163.5,0 0,-40.5 0,-40.5 -163.5,0 -163.5,0 0,40.5zM176,10.6c0,0.3 -10.6,16.3 -23.5,35.5l-23.6,34.9 -61.9,0 -62,0 0,-35.5 0,-35.5 85.5,0c47,0 85.5,0.3 85.5,0.6zM322,45.5l0,35.5 -93.5,0 -93.6,0 18.7,-27.8c10.3,-15.2 21.2,-31.2 24.1,-35.5l5.4,-7.7 69.5,0 69.4,0 0,35.5z"
android:strokeColor="#00000000" />
</vector>

Rectangle Shape with Arrow using XML

How to implement this shape of Departments header using shape and xml without 9-patch ?
I mean rectangle with arrow on the left.
My code snippet:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1px"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/menu_divider" />
<solid android:color="#color/background" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>

if you are looking for someting like this, try the following code..
Make a xml arrow_shape in your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="45" android:toDegrees="45"
android:pivotX="-40%" android:pivotY="87%" >
<shape android:shape="rectangle" >
<stroke android:color="#c6802a" android:width="10dp"/>
<solid android:color="#c6802a" />
</shape>
</rotate>
</item>
</layer-list>
Make a xml rectangle_shape in your drawable folder.
<?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="#B2E3FA" />
</shape>
</item>
In your main xml file
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.stpl.myapplication.MainActivity">
<RelativeLayout
android:id="#+id/arrow"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/arrow_shape"
android:rotation="270" />
<RelativeLayout
android:id="#+id/rectangle"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#drawable/rectangle_shape"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/tools" />
</LinearLayout>

A solution with a gradient:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="2dp" android:height="2dp"
android:top="4dp" android:left="3dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#D83945"/>
</shape>
</rotate>
</item>
<item android:width="50dp" android:height="11dp" android:left="3dp">
<shape>
<gradient
android:startColor="#D83945"
android:endColor="#F9700C"
/>
<corners
android:radius="2dp"
/>
</shape>
</item>
</layer-list>
The final result is:

Draw vertical dotted line

I want to draw a vertical dotted line in xml, using shape.
I used this example:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<size
android:height="400dp"
android:width="4dp"/>
<stroke
android:color="#000000"
android:dashWidth="100dp"
android:dashGap="10dp" />
</shape>
Then:
<View android:id="#+id/vertical_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dotted_line"
android:layout_marginLeft="27dp"/>
But it doesn't work. How can I do it?

I tried a few things, I liked the drawable solutions and found that this worked.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-8dp"
android:bottom="-8dp"
android:left="-8dp">
<shape>
<solid android:color="#android:color/transparent"/>
<stroke
android:width="4dp"
android:color="#df0000"
android:dashGap="4dp"
android:dashWidth="4dp"/>
</shape>
</item>
</layer-list>
The trick is the negative top bottom and left values as these are set outside of the object now, leaving a single dashed line.
Its used in the following view.
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#drawable/dash_line_vertical"
android:layerType="software" />

Try this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size
android:height="400dp"
android:width="4dp" />
<stroke
android:dashGap="10dp"
android:dashWidth="100dp"
android:color="#000000" />
</shape>
Then use like this
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/dot_line"
android:orientation="vertical" >
</LinearLayout>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90" >
<shape android:shape="line" >
<stroke
android:color="#000000"
android:dashWidth="100dp"
android:dashGap="10dp"/>
</shape>
</rotate>