How to use Shape Drawables and its Different Shapes with Different types

by durga chiranjeevi  22/12/2014 | 12:40 0 Posted in Android 

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:

  1. Rectangle,
  2. Oval,
  3. Line, and
  4. 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:

Screenshot_2014-12-22-16-59-02

 

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.

durga chiranjeevi

durga chiranjeevi

I'm currently working as Android developer at Energy Alternatives India. Interested in Application and Game development.
durga chiranjeevi

Latest posts by durga chiranjeevi (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *