Home Tutorials Hints & Tips

Getting Started in Android Development

Part 9 - Using State Lists to Create Custom Buttons

The holo themes supported from Android Honeycomb are very nice to work with. However, there will be times when you wish to produce a totally customized layout for your app with customized TextViews, buttons and more. In part 10 we will look at using nine-patch images to archive this task, but there is another method available to the developer. This technique is to use “State lists” within the drawable resources. There is a already a tutorial covering state lists on this website and it can be found here should you want more detail. Information about state lists on the Android developer’s site can be found here.

The process simply involves creating one or more XML files that are saved to the drawable resource folder of the app. These files contain the button design characteristics for the appropriate button state. In our example there is a file for the normal button state and a file for the pressed state. There are more states such as hover or checked.

For each button state, I need to define a shape within the Shape XML tag. A shape can have rounded corners of a defined radius, and outline or stroke of defines thickness and a solid or graduated background.

The gradient can be linear or radial. You can set the angle of a linear gradient and the center of a radial gradient. You can also define  a start color, end color and mid color. Finally, you can also define padding around the button text.

Bear in  mind that if you are defining corners and padding for the button, then you will need to create an XML file for each screen density and store that file in the respective drawable folder should you want the button to look the same over all screen densities.

My completed drawable state list files are shown below.

Normal button state:

Pressed button state:

You will notice a selector XML tag within each file. This is present as we can choose to create a single file with all button states within that file. The selector would then be used to execute the appropriate section of code for each button state. This can become unwieldy if there are many states and so we can create a “root” selector file that is referenced by the layout. This in turn can call the specific button state file. The root selector file is show below and this in turn is called by the layout by setting background of the button to this drawable resource file.

The root selector file:

At the end of this tutorial your activity_main layout should look similar to the one below.

Download Download tutorial set 1

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