How to Change the Background Color After Clicking the Button in Android?

In this article, we will see how we can change the background of the screen by clicking a button. For this, we will be using the onClick() method. When we click on the button the onClick function is called. To set the click handler event for the button we need to define the android:onClick attribute in the XML file. We can also use onClickListener() in the Java file to call this function programmatically when the button is clicked. 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 Java language. 

Step by Step Implementation

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 Java as the programming language.

Step 2: Define Colors

It is always better to pre-define strings and colors instead of hard coding them hence we will define the colors.

• Open the colors.xml file by navigating to the app -> res -> values -> colors.xml
• Create a color tag inside the resources tag with a name and set a color with its hex code.

Add the below lines inside the colors.xml file.

XML

<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>
<color name="green">#0F9D58</color>
<color name="cool">#188FCF</color>
<color name="warm">#F1D416</color>

Step 3: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rlVar1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/green"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvVar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="240dp"
        android:text="What would you like?"
        android:textSize="30dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvVar1"
        android:layout_centerInParent="true"
        android:layout_marginTop="60dp"
        android:orientation="horizontal"
        android:padding="10dp">

        <Button
            android:id="@+id/btVar1"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Cool"
            android:textSize="25dp" />

        <Button
            android:id="@+id/btVar2"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Warm"
            android:textSize="25dp" />

    </LinearLayout>

</RelativeLayout>

Step 4: Working with the MainActivity.java file

• Set onClick() attribute with a function name android:onClick=”changeBackground”,
• After that in your activity that hosts this layout create a function with the same name, or
• You can instead of using the onClick() attribute directly set the onClickListener() and code its function
• Inside the function use setBackgroundResource(R.color.button_color) function, this will set the background with color button_color.

Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button1, button2;
        final RelativeLayout relativeLayout;

        // set button 1 with its id
        button1 = findViewById(R.id.btVar1);

        // set button 2 with its id
        button2 = findViewById(R.id.btVar2);

        // set relative layout with its id
        relativeLayout = findViewById(R.id.rlVar1);

        // onClick function for button 1
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // set the color to relative layout
                relativeLayout.setBackgroundResource(R.color.cool);
            }
        });

        // onClick function for button 2
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // set the color to relative layout
                relativeLayout.setBackgroundResource(R.color.warm);
            }
        });
    }
}

Output: