Search This Blog

Monday, February 27, 2012

Creating the gradient effect in button

First of all make an .xml file which can be selected the button stats and give them the effect in the gradients.
I have created the button_shape.xml and put this code into it.


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
<shape android:shape="rectangle">
       <gradient android:endColor="#75B11D"
                android:startColor="#A3C723" android:angle="270" />
   <stroke android:width="1dp" android:color="#75B11D" />
   <padding android:left="10dp" android:right="10dp" android:top="5dp" android:bottom="5dp" />
   <corners
       android:bottomLeftRadius="5dip"
       android:topRightRadius="5dip"
       android:topLeftRadius="5dip"
       android:bottomRightRadius="5dip" />
</shape>
    </item>
    <item android:state_active="true">
<shape android:shape="rectangle">
            <gradient android:endColor="#4CC417"
                android:startColor="#4AA02C" android:angle="270" />
<stroke android:width="1dp" android:color="#181818" />
   <padding android:left="10dp" android:right="10dp" android:top="5dp" android:bottom="5dp" />
   <corners
       android:bottomLeftRadius="3dip"
       android:topRightRadius="3dip"
       android:topLeftRadius="3dip"
       android:bottomRightRadius="3dip" />
</shape>
    </item>
    <item android:state_focused="true">
<shape android:shape="rectangle">
       <gradient android:endColor="#4CC417"
                android:startColor="#4AA02C" android:angle="270" />
   <stroke android:width="1dp" android:color="#181818" />
   <padding android:left="10dp" android:right="10dp" android:top="5dp" android:bottom="5dp" />
   <corners
       android:bottomLeftRadius="3dip"
       android:topRightRadius="3dip"
       android:topLeftRadius="3dip"
       android:bottomRightRadius="3dip" />
</shape>
    </item>
    <item android:state_pressed="true">
<shape android:shape="rectangle">
            <gradient android:endColor="#4CC417"
                android:startColor="#4AA02C" android:angle="270" />
   <stroke android:width="1dp" android:color="#181818" />
   <padding android:left="10dp" android:right="10dp" android:top="5dp" android:bottom="5dp" />
   <corners
       android:bottomLeftRadius="3dip"
       android:topRightRadius="3dip"
       android:topLeftRadius="3dip"
       android:bottomRightRadius="3dip" />
</shape>
    </item>
    <item>
    <shape android:shape="rectangle">
            <gradient android:endColor="#75B11D"
                android:startColor="#A3C723" android:angle="270" />
   
   <padding android:left="10dp" android:right="10dp" android:top="5dp" android:bottom="5dp" />
   <corners
       android:bottomLeftRadius="3dip"
       android:topRightRadius="3dip"
       android:topLeftRadius="3dip"
       android:bottomRightRadius="3dip" />
</shape>
    </item>
</selector>




Now  in the button background set this .xml file and see the effect. Change the start and end color according to your requirement.



<Button
         android:id="@+id/Login"
         android:layout_width="63dp"
         android:layout_height="25dp"
         android:layout_x="245dp"
         android:layout_y="2dp"
         android:background="@drawable/button_shape"
         android:text="Login"
         android:textSize="11dp" />




Give comment for the further requirement.



No comments:

Post a Comment

Note: Only a member of this blog may post a comment.