ZOFTINO.COM android and web dev tutorials

Android Color State List Example

Using Android color state list, different colors can be applied to Android widgets depending on applicable states such as pressed, focused, selected, checkable, checked and enabled. Color state list can be defined in xml file and used as value for attributes such as textColor.

Color state list is defined in xml and saved under res/color folder. Its root element is selector and item element is defined for each state that you want to define color for using color and alpha attributes. Default color, which is used when color for specific state is not defined, should be the last element.

Below is an example of color state list xml.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#1976d2"/>
    <item android:state_focused="true" android:color="#c51162"/>
    <item android:color="#3e813d"/>
</selector>

You can apply above color state list to a view, for example apply it to a button to set different text colors depending on whether it is pressed or not.

    <Button
        android:id="@+id/button"
        android:textColor="@color/view_states_color"
	..../>

Button Background Color Based on State

Below example shows how to configure button background to set different colors depending on its state such as pressed, focused and disabled.

First define color state list.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#33691e"/>
    <item android:state_focused="true" android:color="#4a148c"/>
    <item android:state_enabled="false" android:color="#8d6e63"/>
    <item android:color="#1565c0"/>
</selector>

Then define drawable xml for button background and set solid color value to color state list.

 <?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="@dimen/abc_button_inset_horizontal_material"
    android:insetTop="@dimen/abc_button_inset_vertical_material"
    android:insetRight="@dimen/abc_button_inset_horizontal_material"
    android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/abc_control_corner_material" />
        <solid android:color="@color/view_states_color" />
        <padding android:left="@dimen/abc_button_padding_horizontal_material"
            android:top="@dimen/abc_button_padding_vertical_material"
            android:right="@dimen/abc_button_padding_horizontal_material"
            android:bottom="@dimen/abc_button_padding_vertical_material" />
    </shape>
</inset>

Then apply it to Button by setting background.

 <Button
        android:id="@+id/button2"
        android:background="@drawable/my_button"
	. . . />
android color state list example

Color State List Checkbox Example

For checkbox, toggle button and switch, different colors can be set depending on states such as checked and enabled.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#9fa8da" android:alpha="0.9"/>
    <item android:state_checked="true" android:color="#7b1fa2" android:alpha="0.5"/>
    <item android:color="#b71c1c"/>
</selector>

Applying color state list to checkbox.

 <CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
    android:textColor="@color/view_states_color"
android:text="CheckBox"/>
android color state list checkbox example