Fancy Gradient Buttons for Android

Design elements for android is some what complex task in the beginning, but as you explore the internet you will find
Default buttons for android code not so cool so I decided to use the image button instead of regular buttons, then too for some low end devices that is not looking good

After searching for internet I got concept to use the Stylesheet properties for buttons HERE

Its pretty simple and straight forward

First you need to define the xml for color gradient effect. I choose Red color first

File 1 res/drawable/btn_red.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

After this file you need to define the style resources for button text

Include following style tag in res/values/strings.xml

<style name="ButtonText">
 <item name="android:layout_width">fill_parent</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:textColor">#ffffff</item>
 <item name="android:gravity">center</item>
 <item name="android:layout_margin">3dp</item>
 <item name="android:textSize">30dp</item>
 <item name="android:textStyle">bold</item>
 <item name="android:shadowColor">#000000</item>
 <item name="android:shadowDx">1</item>
 <item name="android:shadowDy">1</item>
 <item name="android:shadowRadius">2</item>
</style>

Finally Include the button code where you want the fancy gradient button to appear as follows

<Button
 android:id="@+id/button1"
 style="@style/ButtonText"
 android:layout_width="match_parent"
 android:background="@drawable/btn_red"
 android:text="RedButton" >
</Button>

Note the background attribute and style attribute .

Advertisements