banane

Lovely Gradient Buttons… in Android

I wrote an iPhone post and hinted that I had an Android implementation, and I do!
You can download the project here: unicorn.zip

Normal

Highlighted

So you want lovely gradient buttons, and when you press them, you want another gradient layer to show.

  1. Define your layout in xml, add a button
    <Button
           android:id="@+id/button2"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_margin="20dip"
           android:text="Stop" />
  2. Set “background” to a drawable xml file we will define, such as “pink_background”
    android:background="@drawable/pink_background"
  3. Create the pink_background xml file in the “drawable” folder in your Android project. We’ll get to its contents in a sec.
  4. Create a “button_style.xml” in “res/values” directory. This will contain common styles to all buttons. We’ll go over this below.
  5. In main.xml (layout), add the style reference:
    style = "@style/bStyle"

The Background XML File

This file contains 3 states- default, pressed, and focused. We mainly change default and pressed. The colors are the “high” (on the top, lighter shade) and the “low”, the bottom or darker shade. The angle is the gradient degree. Note the stroke color, which is the border color, and gives the button a nice polish. Also, the rounded corners are done here. We keep it consistent with the iPhone at 7dip.

<selector
   xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
               android:startColor="#91556b"
               android:endColor="#774658"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="#a96f85" />
            <corners
               android:radius="7dp" />
            <padding
               android:left="10dp"
               android:top="10dp"
               android:right="10dp"
               android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
               android:startColor="#ffa0c4"
               android:endColor="#F286AF"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="#a96f85" />
            <corners
               android:radius="7dp" />
            <padding
               android:left="10dp"
               android:top="10dp"
               android:right="10dp"
               android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
               android:startColor="#F286AF"
               android:endColor="#c97292"
               android:angle="270" />
            <stroke
               android:width="1dp"
               android:color="#a96f85" />
            <corners
               android:radius="5dp" />
            <padding
               android:left="10dp"
               android:top="10dp"
               android:right="10dp"
               android:bottom="10dp" />
        </shape>
    </item>
</selector>
</xml>

The Button Style file

Here we put most of our styles for our buttons. Things to note- the slight shadow on the text makes it seemed a bit engraved.

<?xml version="1.0" encoding="utf-8"?>
<resources >
    <style name="bStyle">
        <item name="android:layout_width">261dp</item>
        <item name="android:layout_height">60dp</item>
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:height">261dp</item>
        <item name="android:width">60dp</item>
        <item name="android:layout_centerHorizontal">true</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">17dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_marginTop">15dp</item>
        <item name="android:layout_marginBottom">15dp</item>
        <item name="android:shadowColor">#ababab</item>
         <item name="android:shadowDx">1</item>
        <item name="android:shadowDy">1</item>
        <item name="android:shadowRadius">1</item>
    </style>
</resources>

We put these colors in a large Google Doc grid, to keep the hash and digital values straight from app to app.

You can download the project here: unicorn.zip

banane