How to Change the Background Color of Button in Android using ColorStateList?

ColorStateList is an object which can define in an XML file that can be used to apply different colors on widgets (such as Buttons , etc) depending on the state of Widgets to which it is being applied . For Example, There are many states of Buttons like (pressed, focussed, or none of them ) and other widgets states like enable, checkable, checked, etc,  Using Color State List is a nice way to change the color of the button without using shape drawables or custom images. One should remember the color state list can be used anywhere, where color is used. The color state list is defined in XML and saved under the res/color folder. The root element of the color state list is a selector and the item element is defined for each state that you want to define the color by using color and alpha attributes. The default color should be the last element which is used when color for a specific state is not defined. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language.

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio . Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Go to the layout folder and in the activity_main.xml file change the ConstraintLayout to LinearLayout and give its orientation vertical. Add the Button and Switch to the layout. Below is the code for the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>

<!--Linear Layout with the vertical orientation and center gravity-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--Button whose background color depends on the 
        selector and state of the button-->
    <Button
        android:id="@+id/button"
        android:layout_width="160dp"
        android:layout_height="110dp"
        android:backgroundTint="@color/button_background_color"
        android:text="Click Me"
        android:textColor="@color/button_text_color"
        android:textSize="24sp"
        android:textStyle="bold" />

    <!--Switch with default state as enabled-->
    <Switch
        android:id="@+id/buttonSwitch"
        android:layout_width="160dp"
        android:layout_height="80dp"
        android:checked="true"
        android:text="Enabled"
        android:textAlignment="center"
        android:textSize="24sp"
        android:textStyle="bold" />

</LinearLayout>

Step 3: Add a resource directory named as the color

Add a resource directory named as color to the res folder and keep the root element as a selector, since we want to select the color on the basis of the state. Add two resource files named as button_text_color.xml and button_background_color.xml to the color resource directory. Keep the selector as the root element for the same reason as mentioned above. For performing the above things refer to the below images and codes.

In order to create the color resource file, do right click on the res folder, click on New and select Android Resource Directory.

Now create both the resource file ( button_text_color.xml and button_background_color.xml ) within the color resource directory by doing right-click on the color directory and keeping the selector as the root element.

Below is the code for the button_background_color.xml file.

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

    <!--When Button is not enabled -->
    <item android:state_enabled="false" android:color="#b6b7b5" />
    <!--When Button is in pressed state -->
    <item android:state_pressed="true" android:color="#22a540" />
    <!--When Button is in selected state -->
    <item android:state_selected="true" android:color="#fabcff" />
    <!--Default Background Color -->
    <item android:color="@android:color/white" />

</selector>

Below is the code for the button_text_color.xml file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--When the button is not enabled-->
    <item android:state_enabled="false" android:color="@android:color/white" />
    <!--When button is enabled-->
    <item android:state_selected="true" android:color="@android:color/white" />
    <!--Default Text Color-->
    <item android:color="#db402c" />
  
</selector>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file, and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            // if button is already in selected state and now it is pressed
            // again,then it will reach in not selected state and vice versa
            button.isSelected != button.isSelected
        }

        buttonSwitch.setOnCheckedChangeListener { buttonView, isChecked ->
            // if the switch is checked,then enable the button,else not
            button.isEnabled = isChecked
        }
    }
}

Output: Run on Emulator