Develop Reference

Android drawable xml reverse corners

I'm trying to replicate the following shape in Android studio:
I can't figure out how to do it in android drawable xml.
At the moment I used a layer-list where:
As the first item I placed a transparent (or white) rectangle, to which I gave a padding on the left side and vertically.
As the second item I placed a rectangle containing the gradient and the corners on the left.
Now, I don't know how I can make the two "reverse angles" on the right, I've tried everything but online there aren't many examples to refer.
Here's my current 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="#color/transparent" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="0dp"
android:top="8dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#color/green"
android:startColor="#color/blue"
android:type="linear" />
<corners
android:bottomLeftRadius="22dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="22dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
How can I change the code to obtain this shape?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="600dp"
android:height="400dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#android:color/holo_green_light"
android:startColor="#android:color/holo_blue_light"
android:type="linear" />
</shape>
</item>
<item android:width="600dp"
android:height="100dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:bottomRightRadius="100dp" />
</shape>
</item>
<item android:width="600dp"
android:height="100dp"
android:top="300dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:topRightRadius="100dp" />
</shape>
</item>
<item android:width="200dp"
android:height="200dp"
android:top="100dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:width="600dp"
android:height="200dp"
android:top="100dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#android:color/holo_green_light"
android:startColor="#android:color/holo_blue_light"
android:type="linear" />
<corners android:radius="100dp" />
</shape>
</item>
</layer-list>
Here is a preview image
try this

Android Shape: Circle with tick mark

I am trying to get a circle with a tick mark in the middle using a shape drawable.
This is what I would like:
Could you please suggest me how to approach it?

Try this:
<vector android:height="45dp"
android:viewportHeight="45" android:viewportWidth="45"
android:width="45dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#F2F2F2" android:fillType="evenOdd"
android:pathData="M22.5,22.5m-22.5,0a22.5,22.5 0,1 1,45 0a22.5,22.5 0,1 1,-45 0"
android:strokeColor="#00000000" android:strokeWidth="1"/>
<path android:fillColor="#F7286F" android:fillType="nonZero"
android:pathData="M21.7692,31.1334C20.5904,32.2889 18.6777,32.2889 17.4994,31.1334L10.8841,24.6492C9.7053,23.4943 9.7053,21.6195 10.8841,20.4646C12.0623,19.3092 13.975,19.3092 15.1538,20.4646L19.0952,24.3274C19.3928,24.6185 19.8758,24.6185 20.1739,24.3274L30.8462,13.8666C32.0244,12.7111 33.9371,12.7111 35.1159,13.8666C35.682,14.4214 36,15.1742 36,15.9589C36,16.7435 35.682,17.4963 35.1159,18.0511L21.7692,31.1334Z"
android:strokeColor="#00000000" android:strokeWidth="1"/>
That drawable is like below:

you can try 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:width="32dp"
android:height="32dp" />
<solid android:color="#fff" />
</shape>
</item>
<item
android:width="18dp"
android:height="4dp"
android:gravity="center"
android:right="18dp"
android:top="15dp">
<rotate android:fromDegrees="40">
<shape android:shape="rectangle">
<gradient
android:angle="-180"
android:endColor="#FF0066"
android:startColor="#D6006C" />
</shape>
</rotate>
</item>
<item
android:width="64dp"
android:height="64dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:width="32dp"
android:height="4dp"
android:gravity="center"
android:left="12dp"
android:top="4dp">
<rotate android:fromDegrees="-50">
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#FF0066"
android:startColor="#D6006C" />
</shape>
</rotate>
</item>
</layer-list>

This code should work :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UnusedResources">
<item>
<shape android:shape="oval">
<solid android:color="#android:color/black"/> //enter the color you want
<size
android:width="64dp"
android:height="64dp"/>
</shape>
</item>
<item>
<bitmap android:src="#drawable/ic_check_white_36dp"
android:gravity="center"/>
</item>

Try to go with a vector Drawable. If you have two or more different drawables you can make a layer out of them.
However the following code would do the work.
<?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="#fff"/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
</item>
<item
android:width="18dp"
android:height="3dp"
android:top="15dp"
android:right="17dp"
android:gravity="center">
<rotate
android:fromDegrees="40">
<shape android:shape="rectangle">
<solid android:color="#D6006C"/>
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="3dp"
android:left="12dp"
android:top="4dp"
android:gravity="center"
>
<rotate
android:fromDegrees="-50">
<shape android:shape="rectangle">
<solid android:color="#D6006C"/>
</shape>
</rotate>
</item>
<item
android:width="60dp"
android:height="60dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</layer-list>

This will create a tick with a gradient tick mark.
<?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="#fff"/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
</item>
<item
android:width="18dp"
android:height="3dp"
android:top="15dp"
android:right="17dp"
android:gravity="center">
<rotate
android:fromDegrees="40">
<shape android:shape="rectangle">
<solid android:color="#D6006C"/>
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="3dp"
android:left="12dp"
android:top="4dp"
android:gravity="center"
>
<rotate
android:fromDegrees="-50">
<shape android:shape="rectangle">
<gradient android:startColor="#D6006C"
android:endColor="#491F2B"/>
</shape>
</rotate>
</item>
<item
android:width="60dp"
android:height="60dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</layer-list>

First create a vector with tick icon with gradient "ic_tick_vector" Requires api lvl 21 or above
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"
android:strokeColor="?android:attr/colorAccent"
android:strokeWidth="0">
<aapt:attr name="android:fillColor">
<gradient
android:endX="10"
android:endY="20"
android:startX="1"
android:startY="20"
android:type="linear">
<item
android:color="?android:attr/colorAccent"
android:offset="0.0" />
<item
android:color="?android:attr/colorPrimaryDark"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path android:strokeWidth="0.1"
android:strokeColor="#color/colorAccent"
android:pathData="M0,80 H100" />
</vector>
then create a drawable with circle background "round_background"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<stroke android:color="#557C7373" android:width="10dp"/>
<solid android:color="#color/lightBlue"/>
<size android:width="150dp" android:height="150dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/white"/>
<size android:width="100dp" android:height="100dp"/>
</shape>
</item>
</selector>
Use this in your imageview now u will have rounded background with tick item at center (gradient)
<ImageView
android:background="#drawable/round_background"
android:layout_gravity="center"
android:src="#drawable/ic_tick_vector" />

Layerlist drawable doesn't stretch nicely

I'm starting to learn android layer list and working with drawables.
I'm trying to create a simple line with a circle at each end:
I came up with a layerlist as shown below. It works good but the problem is when I run it on various screen sizes the circles either separate from the line or the get pushed in and fall in on the line.
I want the shape to resize as is and not get deformed on different screen sizes. I'm not sure what I'm missing.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="300dp" android:gravity="center_horizontal|left">
<shape android:shape="ring"
android:innerRadiusRatio="700"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="#fff" />
</shape>
</item>
<item
android:bottom="13dp"
android:right="53dp"
android:left="53dp"
android:top="13dp">
<shape android:shape="line">
<solid android:color="#fff" />
<stroke
android:width="2dp"
android:color="#fff" />
</shape>
</item>
<item
android:right="300dp" android:gravity="center_horizontal|right">
<shape
android:shape="ring"
android:innerRadiusRatio="700"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="#fff" />
</shape>
</item>
</layer-list>

Try this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center"
android:left="5dp">
<shape android:shape="line">
<solid android:color="#ec0b0b" />
<stroke
android:width="2dp"
android:color="#054b89" />
</shape>
</item>
<item
android:drawable="#drawable/ic_online"
android:gravity="left"
android:right="50dp" />
<item
android:drawable="#drawable/ic_online"
android:gravity="right" />
</layer-list>
android:drawable="#drawable/ic_online"
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="10dp"
android:height="10dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#05b714"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>
OUTPUT

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>

Android banner ribbon using shape

I am trying to figure out how I would stack shapes so I can create the following ribbon(Pink/White/Pink/White/Pink part). I will then be using this as a background for my textview.

I figured it out using a layer-list
<?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">
<solid android:color="#FFe5887c" />
<size android:width="2dp" android:height="2dp"/>
</shape>
</item>
<item android:top="2dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF" />
<size android:width="1dp" android:height="1dp"/>
</shape>
</item>
<item android:top="3dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="20dp" android:height="20dp"/>
</shape>
</item>
<item android:top="23dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF" />
<size android:width="1dp" android:height="1dp"/>
</shape>
</item>
<item android:top="24dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="2dp" android:height="2dp"/>
</shape>
</item>
</layer-list>