Customising Buttons with Android Shape Drawables

Producing a top-selling Android app requires more than great functionality. The app must look good too. Any professional Android developer will tell you that achieving this requires a great deal of time and effort. In this post, I want to look at just one apparently simple factor in creating the visuals which is the appearance of buttons. It’s easy to add a button to a view in the Android resource editor but the default appearance is uninspiring to say the least!

There are various approaches to creating visually appealing buttons perhaps the most obvious being to create an image as the background. Android provided a mechanism for creating stretchable background images known as 9-patch images. Called 9-patch as they break the image into 9 separate patches with the central area being allowed to stretch to accommodate content. This technique allows a single background image to be used for all buttons regardless of their size. I should say at this point though that you should provide images in at least three different resolutions in order to render correctly on different device sizes!

In many cases, the complexity of using 9-patch images is not required. One of the beauties of the Android resource system is that the background of any view (buttons are views), can be a Drawable. Drawables can be images, colors, transitions, shapes and a variety of other powerful sources. It is often  possible to create a really nice looking background images just by using Shape Drawables. Shape Drawables are XML declarations of a graphical shape which is interpreted at run-time by the Android system and rendered as a graphic. From the developers perspective, they are a simple way to create clean, scalable backgrounds to any view component (including the buttons I set out to discuss).

Using shapes is really very simple. First, we define the shape drawable in res/drawables:


<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="16dp"
android:shape="rectangle" >
<corners android:radius="6dp" />
<gradient android:angle="270" android:endColor="#30196E" android:startColor=#2A7FCE" />
<stroke android:width="1px" android:color="#050875" />
</shape>

Definition of the Shape Drawable

Then in a layout (res/layout/mylayout.xml) include the button definition with the android:background attribute referencing the Drawable.

<Button
android:id="@+id/but_buy_flight" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:layout_marginLeft="20dp" android:layout_marginRight="20dp"
android:background="@drawable/button_shape"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="@string/str_buy_flight"
android:textColor="@color/butText" />

Using the Drawable as the button background

The result is shown below. You can of course use whatever combination of gradients, strokes and shapes you wish to produce the desired image. In the same project, I also used a Shape Drawable to create a background image for list items.

An image of a Button generated with Shape Drawable
Button generated with Shape Drawable

For me, as someone who normally sub-contracts graphics work, one of the wonderful things about using Shape Drawables is that I can experiment really quickly.

Learn more about Android programming with one of Learning Tree’s courses:  Developing Applications for Android™ Devices or Building Android™ Applications: Extended Features.

Mike Way

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.