http://www.zoftino.com/android-shape-drawable-examples
In Android, shape drawables can be defined in xml which can be used as resources in java code and xml to set image related attributes such as background, icon, etc of views. You can define rectangle, oval, ring, and line shape drawables in xml.
The root element of the shape drawable xml is shape, you can define corners, gradient, padding, size, solid and stroke as child elements of the shape to define a drawable. Using corner element, you can define round cornered rectangle shapes. Gradient element allows you to set start color and end color, x position, y position, gradient type and angle in multiples of 45 to define gradient of the shape. Solid element allows you to set color to fill the shape. Stroke element allows you define stroke like and its thickness.
You need to save shape drawable xmls in res/drawable folder. See android resources tutorial for more information on android resource and accessing resources.
Rectange Shape Drawable
Below example defines rectangle shape drawable with gradient and round corners. Attributes of the gradient element lets you define center of gradient on x and y axis, angle of gradient 0(left to right), 45 or 90(bottom to top), start, end and center colors and type of gradient (radial, linear and sweep).
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:centerX="0.1"
android:centerY="0.1"
android:centerColor="#1976d2"
android:startColor="#00e5ff"
android:endColor="#6200ea"
android:gradientRadius="100"
android:type="linear"/>
<padding android:left="5dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp" />
<corners android:radius="6dp" />
</shape> When above drawable is applied to a button by setting background attribute to the drawable, it will create round cornered, color-gradient button. Below is the output with sweep, linear and radial gradient types.
Below is the output with centerX and centerY values of gradient element set to 0.1 and 0.5, 0.5 and 0.1 and 0.5 and 0.5 for different gradient types.
Below is the output with centerX and centerY values of gradient element set to 0.1 and 0.5, gradient type set to linear and with different gradient angles.
Below is the output with different values for gradientRadius attributes of gradient element and with gradient type set to radial.
Below is the shape definition with stroke element, you can use it to create button with border as shown below.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
....
<stroke android:color="@color/colorPrimaryDark"
android:width="4dp"
android:dashGap="4dp"
android:dashWidth="8dp"/>
</shape>
Oval Shape Drawable
You can create oval shape drawable as shown below and apply it to button to create oval shaped button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorPrimary"/>
</shape>Below picture shows oval shaped buttons which you can get when background is set to oval shaped drawable with solid or gradient elements defined.
Ring Shape Drawable
To create ring shape drawable, you need to set shape, innerRadius and thichkness attributes of shape element. Below screen shows round buttons which you can create by setting background attribute of a button to ring shape drawable.
To adjust the ring around view, you need to set padding in the definition of ring shape drawable. You can set ring color using solid or gradient elements of shape.
Below are shape drawable xmls for all three button outputs shown above respectively.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="@color/colorPrimary" />
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="40dp"
android:useLevel="false">
<gradient
android:angle="0"
android:centerX="0.2"
android:centerY="0.6"
android:centerColor="#b60862"
android:startColor="#ba68c8"
android:endColor="#dd2c00"
android:gradientRadius="120"
android:type="sweep"/>
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="8dp"
android:shape="ring"
android:thickness="30dp"
android:useLevel="false">
<gradient
android:angle="0"
android:centerX="0.1"
android:centerY="0.1"
android:centerColor="#b60862"
android:startColor="#ba68c8"
android:endColor="#dd2c00"
android:gradientRadius="120"
android:type="sweep"/>
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
Line Shape Drawable
To define line shape drawable, you need to set shape attribute of shape element to line and add storke element with color and size element.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="20dp"
android:color="#b71c1c" />
<size android:height="8dp" />
</shape>