Friday, 5 April 2013

Shape Drawable


The root  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 a radius 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:dashWidthand  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. 

for example.

Button Designs

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

    
    <corners
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp" />

    <gradient
        android:angle="-90"
        android:centerColor="#D27AAD"
        android:endColor="#FEADD8"
        android:startColor="#A54582" />

</shape>


selected_tie_button_bg.xml

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

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

    <corners
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp" />

    <gradient
        android:angle="-90"
        android:centerColor="#E9EBEA"
        android:endColor="#B0B1B2"
        android:startColor="#FFFFFF" />

</shape>

layout_bg.xml

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

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

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

</shape>

This is a simple xml file in which there are some tags like shape, solid, corners, gradient, padding and stroke. 

main.xml


<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@drawable/layout_bg"
                android:orientation="horizontal"
                android:padding="2dp" >

                <Button
                    android:id="@+id/dietBtn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/selected_tie_button_bg"
                    android:text="Diet" />

                <Button
                    android:id="@+id/othersBtn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/tie_button_bg"
                    android:text="Others"
                    android:textColor="@android:color/white" />
   </LinearLayout>

No comments:

Post a Comment

Disqus for Android