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.
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|
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.
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.
Custom drawn buttons can be a great way to make your app look great and stick out from the crowd.