How to style button for 3 different states

Question

I'm trying to create my own version of Simon says. I want to create three states(colors) for the buttons; off(false), flashed pressed(true). If I use mButton1.setbackgroundColor(Color.Red) I lose the XML button styling. How can this be done without losing the XML styling or is there a better way to style the buttons.

Answer 1

You can create button selector xml in drawable directory, something like below. It defines different drawables to use when button is at different states, eg: default, pressed, etc.

drawable/my_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/my_button_pressed" />

    <!-- focused -->
    <item android:state_focused="true" android:drawable="@drawable/my_button_pressed" />

    <!-- selected -->
    <item android:state_selected="true" android:drawable="@drawable/my_button_pressed" />

    <!-- default -->
    <item android:drawable="@drawable/my_button_default" />
</selector>

Then, define the respective drawable xml for different states:

drawable/my_button_default.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- define this color in your colors.xml  -->
    <solid android:color="@color/default_button_color"/>

    <!-- this makes the rounded corners button -->
    <corners android:radius="5dp" />
</shape>

drawable/my_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- define this color in your colors.xml  -->
    <solid android:color="@color/pressed_button_color"/>

    <corners android:radius="5dp" />
</shape>

You can now use the drawable/my_button_selector, in the xml that defines the button:

<Button
    android:id="@+id/my_button"
    android:background="@drawable/my_button_selector"
    android:layout_width="200dp"
    android:layout_height="160"
    android:text="My Button" />

Note that for API Level 21 or higher, you can use the default ripple effect. Place the below my_button_selector.xml under drawable-v21 directory:

drawable-v21/my_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_material_light">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:drawable="@drawable/my_button_default" />
</ripple>

With this, Android will use v21/my_button_selector.xml for API Level 21 or higher. For API level lower than that, it uses drawable/my_button_selector.xml.