Creating a Custom Drawn Button for Android

Through this tutorial you will learn how to create a custom drawn button, and learn how to use that button in an application.

Why Create a Custom Drawn Button?

If you ask me, I feel like the default button drawing for Android makes the entire OS feel a bit like Windows 95. The button doesn't really look that different--it is basically the same plain boring gray.

Having a boring gray button can be an advantage. It instantly sticks out to most users and can be easily identified as an element that you can click. The other advantage is that it is the default button style and very easy to use and maintain.

Two buttons with the default drawing style

There are also many advantages to using custom drawn buttons. You can use colors that better fit with the palette of your app, make buttons more distinguishable from each other, and give your app a more unique feel that helps separate it from the rest of the crowd.

Step 1: Create the Graphics for Your Button

You will want to create two different images for the button. One image will be for when the button is pressed, and the other image will be for displaying it normally. I used the GIMP to create these super simple images below.

Save them as buttonborder2.png and buttonfilled2.png to use them properly in the next step.

buttonborder2.png

buttonfilled2.png

The graphics may look small, but they will automatically get scaled when we use them in our Android app.

Step 2: Create an XML File for the Button

Now that we have the proper images, we want to create an XML file that describes which images to use when drawing the button. We create this xml file in the drawable folder, since it describes how to draw something.

Save the file below as androidbluesquarebutton.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" 
       android:state_pressed="false" 
       android:drawable="@drawable/buttonfilled2" />
    <item android:state_focused="true" 
       android:state_pressed="true"
       android:drawable="@drawable/buttonfilled2" />
    <item android:state_focused="false" 
       android:state_pressed="true"
   android:drawable="@drawable/buttonfilled2" />
    <item android:drawable="@drawable/buttonborder2" />
</selector>

Step 3: Use the Button Drawable in Your Layout

For the rest of this tutorial, we are going to use the code we created in the Android Button Tutorial as a basis for testing our new button.

Inside your layout, change the background for your button to be androidbluesquarebutton.

Setting the background property

You should also change the text color to #ffffff so that it will show up as white.

Step 4: Run the App

Run the app.

Screenshot of the app running

The button may not look exactly like you intended it. That's because Android is scaling the button images to the proper size. However, this scaling makes our button border look all blurry and distorted.

Thankfully, Android has a simple solution to this problem. Use 9-patch images.

Step 5: Update the Images to be 9 Patch Images

In a nutshell, 9 patch images are special image files that include extra information to describe which areas of the image may be stretched. A full tutorial on 9 Patch Images will be written in the future.

Delete the old buttonborder2.png and buttonfilled2.png from your drawable folder. Save the following images as buttonborder2.9.png and buttonfilled2.9.png.

buttonborder2.9.png

buttonfilled2.9.png

Step 6: Run the App Again

The image for the button is no longer distorted.

Screenshot of the button

Screenshot of the custom button being pressed

If the results don't look any different, make sure that you are using the new images, and that the images end with .9.png

Without the .9 before the .png Android will not be able to properly interpret the image as a 9 patch image.

Final Thoughts

Custom drawn buttons can be a great way to make your app look great and stick out from the crowd.