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
- 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.
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.
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