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.
- 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" /> - Set “background” to a drawable xml file we will define, such as “pink_background”
android:background="@drawable/pink_background"
- Create the pink_background xml file in the “drawable” folder in your Android project. We’ll get to its contents in a sec.
- Create a “button_style.xml” in “res/values” directory. This will contain common styles to all buttons. We’ll go over this below.
- 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.
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.
<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