Smartphones

Dressing up Android buttons

Check out this Android button class tutorial from developer William Francis, who uses minimalistic code to produce the desired effect.

A TechRepublic reader requested I write a tutorial on Android's button class. At first, I was skeptical; of all the components in the UI framework, the button widget is one of the most thoroughly covered in the SDK documentation. However, after establishing a dialogue with this reader, I came to believe perhaps he was on to something. Let me explain.

If you google "android button tutorials," you'll get more than 18 million hits, including the one Google ships as part of its SDK documentation. (To my surprise, Google's official example is not the one that comes up first in the search engine.) But as you start to sift through the results, you'll see a rehash of the same themes again and again. Either the examples are so simple they are hardly practical, or on the flip side the examples are so focused on customizing every aspect of the button that they are daunting to new developers.

After corroborating a bit with the reader, we came up with the following goals for this tutorial:

  • Demonstrate an easy technique to declare multiple buttons dynamically.
  • Show readers a shortcut for arranging the buttons in an attractive configuration that doesn't require hours of poking around in the XML layout files.
  • Implement a centralized handler for click events instead of using nested classes, which are often unfamiliar to those new to Java.
  • Establish how context menus and long clicks can be handled with the button widget.
  • Prove that a developer doesn't need a degree in the graphic arts and hours of Photoshop experience to produce something other than the ugly default buttons the UI framework provides.

This may sound like a lot to tackle in a beginner-level tutorial, but after some pruning of the code, I was pleased with both the resulting UI experience, as well as the minimalistic code used to produce the desired effect. Interested in seeing for yourself? Let's do it then! (If you prefer to download the entire project and import it into Eclipse, it's available here.)

Instructions on how to dress up Android buttons

Step one: Open Eclipse and create a new Android project. Target a device running Android 1.6 or greater to capture the largest possible user base. Step two: We are going to start with creating the drawable resources for our buttons. The majority of tutorials on creating custom-looking buttons focus on providing 9-patch stretchable images. This works, but in my opinion can get a little overwhelming to developers like me who are "artistically challenged." A neat and often overlooked alternate approach is to use the framework's built-in XML drawing commands. To try out this technique, you'll want to create a new folder in your /res directory called /drawable. Step three: We will layout our button in its standard (non-pressed) form. Add a new file to /drawable called: rounded_rect_w_gradient.xml. The xml defines a new rectangle, with rounded corners, shaded using a green gradient.
rounded_rect_w_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#BDffffff"
android:endColor="#BD33ff00"
android:angle="270" />
<corners android:radius="3dp" />
</shape>
Note: If you look at the values assigned to the start and end colors of our gradient, you'll note that there are 4 instead of the 3 bytes normally used to express an RGB color. The first byte, in our case hex BD, defines the alpha channel (or opacity) for our button. The value translates to decimal 189, or roughly 74% of the max value of 256. So our buttons will about 26% see-through. This allows us to place a background on our screen (if we choose) and still see it through the buttons -- a professional looking and eye-pleasing effect (Figure A). Figure A

A button produced using the rounded_rect_w_gradient layout.
Step four: Next we need a background for our button when it is depressed by the user. A nice and easy effect is simply to replicate the above layout removing the gradient.
rounded_rect_no_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#BD33ff00"/>
<corners android:radius="3dp" />
<stroke android:width="5px" color="#000000" />
</shape>
Step five: Now we need to define a selector. Selectors are a cool way to tell the Android UI framework which drawable resource to use based on the state of the button. The Android SDK details all the possible states a button widget can have, but we are only interested in two: when the button is depressed and when it is not.
fancy_button_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
 android:drawable="@drawable/rounded_rect_no_gradient"/>
<item android:drawable="@drawable/rounded_rect_w_gradient" />
</selector>
See steps six through 10 of this Android tutorial.

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

0 comments