Introduction

A drawable resource  is basically a graphic that can be drawn to the screen in your application. Drawables are used to define shapes, colors, borders, gradients, etc which can then be applied to views within an Activity. There are many different kinds of drawables each for a particular design context. In this post, we focus on color state list drawables in android app design.

What is a color state list drawable

During the design of your application, by default the views assume a static color regardless of the state in which the view is in. Views can take on various states: pressed, enabled, focused, checked etc. If you need to change the color of your views depending on their state, then color state list drawables will prove very helpful.

A color state list is an object you can define in XML and apply as a color that actually changes colors depending on the state of the View object it is applied to. For example, a Button widget can exist in one of several states: pressed, focused, or neither. Using a color state list, you can provide a different color for each state.

During each state change, the state list is traversed top to bottom, and the first item that matches the current state is used. The selection is isn’t based on the “best” match, but rather the first item that meets the minimum criteria of the state.

Syntax

You describe the state list in an XML file. Each color is defined in an <item> element inside a single <selector> element. Each <item> uses various attributes to describe the state in which it is used. The syntax of a shape drawable is as shown below;

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"
        android:lStar="floating_point_value"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

Understanding the Elements

Let us look at the various elements within the color state list drawable:

Selector Element

This is the root element of every color list drawable. It’s a required element. It contains the following variables;

xmlns:android: This is a string that defines the XML namespace which must be "http://schemas.android.com/apk/res/android"

Item Element

This is a child element that defines a color to use during certain states, as described by its attributes. It is a child of a <selector> element. It features the following attributes;

android:color

This is a required attribute that specifies a hexadecimal color. The color is specified with an RGB value and optional alpha channel. The value always begins with a pound (#) character, followed by the Alpha-Red-Green-Blue information in one of the following formats:

• #RGB
• #ARGB
• #RRGGBB
• #AARRGGBB

android:lStar

This is an optional floating point attribute which modifies the base color’s perceptual luminance. It takes either a floating-point value between 0 and 100 or a theme attribute that resolves as such. The item’s overall color is calculated by converting the base color to an accessibility friendly color space and setting its L* to the value specified on the lStar attribute. for the top-left corner, as a dimension value or resource.

android:state_pressed

This is a boolean attribute. Its"true" if this item is used when the object is tapped, such as when a button is touched or clicked. It’s "false" if this item is used in the default, non-tapped state.

android:state_focused

This is a boolean attribute.  Its "true" if this item is used when the object is focused, such as when a button is highlighted using the trackball or D-pad. It’s "false" if this item is used in the default, non-focused state.

android:state_selected

This is a boolean attribute. Its "true" if this item is used when the object is selected, such as when a tab is opened. It’s "false" if this item it used when the object isn’t selected.

android:state_checkable

This is a boolean attribute. Its "true" if this item is used when the object is checkable. It’s "false" if this item is used when the object isn’t checkable. Only useful if the object can transition between a checkable and non-checkable widget.

android:state_checked

This is a Boolean attribute. Its "true" if this item is used when the object is checked. It’s "false" if it is used when the object is deselected.

android:state_enabled

This is a boolean attribute. Its "true" if this item is used when the object is enabled, capable of receiving touch or click events. It’s "false" if it is used when the object is disabled.

android:state_window_focused

This is a boolean attribute. Its "true" if this item is used when the application window has focus, meaning the application is in the foreground. It’s "false" if this item is used when the application window doesn’t have focus, such as if the notification shade is pulled down or a dialog appears.

Examples

To illustrate the above concepts, let us assume in your android project, you have created an XML color state list drawable resource saved as button_color_states.xml at res/color/button_color_states.xml This will change the color of the button’s text depending on whether its enabled or not.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="@android:color/primary_text_dark"
        android:state_enabled="true" />
    <item
        android:color="@android:color/darker_gray"
        android:state_enabled="false" />
</selector>

And then applied to a Button view inside the layout XML file using the textColor property:

<Button
    android:id="@+id/subscribeButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Subscribe"
    android:textColor="@color/button_color_states" />