Home Tutorials Hints & Tips

Creating Attractive Buttons using Android XML

The holo themes supported in Android are really nice to work with but the buttons can look a bit dull and there are many times you want customize look and feel of your app. Nine-patch bitmap images are one solution. However, there are other simple to use tools built into Android that allow you to create colorful and dynamic buttons in XML.

The first task will be to create a “selector” file that will be stored in the “drawable” resource folder. In my example it is called “button_background.xml”.

Selector files in Android Studio Drawable Folder

This file will reference the various button states that you want to use. In this example we simply want a default appearance for the button and a different appearance for when the button in pressed. The Complete selector file is show below.

The android:state_pressed attribute is used in the “item” tag and this points to a drawable resource file:


This file defines the color and shape attributes for the button. A full list of Android State Lists can be found at the following URL:


You can then create an XML file for each button state. These files too are stored in the drawable folder. In this example, I have chosen to create a button with rounded corners of radius 13dp and padding around the sides. The stroke is an outline for the button. In addition to solid buttons, you can create attractive graduated buttons. You are able to define a start color, end color and middle color. You can also use linear or radial graduation, set the center of the graduation and the angle. My “button_normal.xml” file is shown below.

Likewise, I want to define a separate XML file to hold the design parameters for the button in the pressed state. This is shown below, the gradient attribute having been replaced by a solid color attribute.

Finally, place a background attribute for the button in that layout file that references the selector XML file. My example is shown below:

The screenshots below show the button with the default holo theme, the normal button and the pressed button.

Screenshot showing default holo android theme and button design with selector file

Remember that should you want a common look to all your custom buttons and they has corners, strokes and padding, then you will need to create XML files for each screen density.

Privacy and Cookies Disclaimer Copyright
© 2015 - 2018 North Border Tech Training All rights reserved