16 Apr 2013

Shape drawable in Android

Hello Friends, Today I am going to post a sample for create a background using drawable xml file. there are many tag in xml so you can create a background with gradient, round corner, background color and also you can set the padding in the background. I have create a xml file using shape attribute. Here is a example of the shape xml file.



here is the description for tags like shape, solid, corners, gradient, padding and stroke. 

The root tag of the xml file is a shape tag which indicates that you are creating a drawable for the background for some view. 

Solid tag is for paint the color of the shape in this tag there is a color attribute, this is for set the color of the shape.

Corner tag is for set the style of the corner of the shape. In this tag there is aradius attribute which is used to round the corner of the shape. 


Gradient is the tag which is used to set the gradient background of the shape. In this tag there are different types of the attributes like angle which indicates the angle of the gradient and there are two other attributes which are startColor and the endColor which are for set the start and end color of the gradient. 

There is a Padding tag which is used to set the padding of the shape. 

Stroke is used to create the border of the shape. in this tag there are with attribute which indicates the width of the border. There is a color attribute which is used to set the color of the border. If you want to set the dashed border instead of plain border then you can use other two attribute of the stroke. android:dashWidth and  android:dashGap are used to set the dashed border of the shape. 

Now to use this drawable you just have to set this xml as the background of the view. 
Here is all xml file for shapes:
shape_1:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#00000000" />

    <stroke
        android:width="2dp"
        android:color="#ff000000"/>

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

</shape>
shape_2:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FF0000FF" />

    <stroke
        android:dashGap="2dp"
        android:dashWidth="1dp"
        android:width="4dp"
        android:color="#FFFFFFFF" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners android:radius="4dp" />

</shape>
shape_3:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="#00000000" />

    <stroke
        android:dashGap="2dp"
        android:dashWidth="4dp"
        android:width="4dp"
        android:color="#99000000" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners android:radius="4dp" />

</shape>


shape_4:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >

    <stroke
        android:dashGap="2dp"
        android:dashWidth="1dp"
        android:width="1dp"
        android:color="#FF000000" />

</shape>


shape_5:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="270"
        android:endColor="#80FF00FF"
        android:startColor="#FFFF0000" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners android:radius="8dp" />

</shape>


i will be happy if you will provide your feedback or follow this blog. Any suggestion and help will be appreciated.
Thank you :)

No comments:

Post a Comment