How to use Shape Drawables and its Different Shapes with Different types
In this blog post, i’ll explain how to use Shape Drawables and its different shapes and styles.
Android provides a number of drawable resources, many of which are defined solely in XML. These drawables offer a wide range of flexibility and are a very powerful tool that are often under-utilized.
Shape drawables provide four basic shapes:
- Rectangle,
- Oval,
- Line, and
- Ring.
From these shapes you can create an almost unlimited number of effects and styles for your application. It should be noted that these effects are pretty basic. If you want to have shiny gloss effects, you need to customize the tags of these shapes.
All four shape types support the following tags (some of the shapes support additional tags, but this is the set supported by all of them):
gradient: Specify gradient backgrounds
solid: Specify solid background color
padding: Specify padding between the edge of the shape and its contents
size: Specify the width and height
stroke: Specify a stroke line around the edge of the shape
ScreenShot of overall:
If you lookout my overall screenshot, i used rectangle shape mostly and line has least, where as ring i haven’t used it because it’s only used for progress bar. So there’s lot thing to explain, lets get started.
1) Color applying to background:
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#26ce61" android:text="Button" />
2) Transparent Color to background:
<Button android:id="@+id/button11" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/transparent" android:text="Button" />
3)Gradient Color Disappears downwards:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="@android:color/transparent" android:startColor="#26ce61" /> <stroke android:width="1dp" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example3" android:text="Button" />
4) Gradient Color Raising downward:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="#26ce61" android:startColor="@android:color/transparent" /> <stroke android:width="1dp" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example4" android:text="Button" />
5) Gradient Color Raising downward with Border:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="#307748" android:startColor="#26ce61" /> <stroke android:width="1dp" android:color="#1A5C31" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example5" android:text="Button" />
6) Gradient Color Simple One Color:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="#307748" android:startColor="#307748" /> <stroke android:width="1dp" android:color="#307748" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example6" android:text="Button" />
7) Gradient Simple plain Color with Border:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="#64EA93" android:startColor="#64EA93" /> <stroke android:width="1dp" android:color="#1A5C31" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example7" android:text="Button" />
8) Gradient EditText Style:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="@android:color/transparent" android:startColor="@android:color/transparent" /> <stroke android:width="4dp" android:color="#64EA93" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example8" android:text="Button" />
9) Gradient With Rounded Corners:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="@android:color/transparent" android:startColor="@android:color/transparent" /> <stroke android:width="4dp" android:color="#64EA93" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example9" android:text="Button" />
10) Gradient With Rounded Corners With Border:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:centerColor="#26ce61" android:endColor="#26ce61" android:startColor="#26ce61" /> <stroke android:width="4dp" android:color="#282a2f" /> <corners android:radius="25dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example10" android:text="Button" />
11) Gradient With Shadows:
res/drawable/layer_list.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/background_shade"/> <item android:drawable="@drawable/foreground_color_shade" android:bottom="4px" /> </layer-list>
res/drawable/foreground_color_shade.xml
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#26ce61" android:endColor="#26ce61" android:angle="90"> </gradient> <corners android:radius="20dip" /> <stroke android:width="1px" android:color="#26ce61" /> </shape>
res/drawable/background_shade.xml
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#50785E"/> <corners android:radius="20dip"/> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example3" android:text="Button" />
12) Gradient With Pressed Effect:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape> <gradient android:angle="270" android:endColor="#00FFFF" android:startColor="#00FFFF" /> <stroke android:width="4dp" android:color="#282a2f" /> <corners android:radius="25dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <item> <shape> <gradient android:angle="270" android:endColor="#26ce61" android:startColor="#26ce61" /> <stroke android:width="4dp" android:color="#282a2f" /> <corners android:bottomLeftRadius="25dp" android:bottomRightRadius="25dp" android:topLeftRadius="25dp" android:topRightRadius="25dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape></item> </selector>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example12" android:text="Button" />
13) Gradient With Two Different Colors & Shades:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:endColor="#26ce61" android:startColor="#00FFFF" /> <stroke android:width="1dp" android:color="#00FFFF"/> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example13" android:text="Button" />
14) Gradients With Three Different Colors & Shades:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <gradient android:angle="270" android:centerColor="#FE9A2E" android:endColor="#26ce61" android:startColor="#00FFFF" /> <stroke android:width="1dp" android:color="#FE9A2E" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example14" android:text="Button" />
15) Simple Oval Shape:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:type="radial" android:gradientRadius="20" android:centerX=".6" android:centerY=".35" android:startColor="#26ce61" android:endColor="#26ce61" /> <size android:width="100dp" android:height="100dp"/> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example15" android:text="Button" />
16) Gradient With Spiked Oval Shape:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#0000FF" /> <size android:width="30dp" android:height="30dp"/> <stroke android:dashWidth="3dp" android:dashGap="3dp" android:width="2dp" android:color="#0000FF" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example16" android:text="Button" />
17) Gradient With Oval Shape:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:type="sweep" android:startColor="#77990099" android:endColor="#22990099"/> <stroke android:width="1dp" android:color="#aa990099" /> <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example17" android:text="Button" />
18) Simple Line Shape:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line"> <stroke android:width="2dp" android:color="#000000" /> <size android:height="20dp" /> </shape>
<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_example18" android:text="Button" />
Hope this helpful. Your valuable comments are always welcomed. It will help to improve my post and understanding.
Related Posts
durga chiranjeevi
Latest posts by durga chiranjeevi (see all)
- Sharing Application Data Between Two Android Apps – Part III - April 8, 2015
- Sharing Application Data Between Two Android Apps – Part II - April 8, 2015
- Sharing Application Data Between Two Android Apps – Part I - April 8, 2015