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

14 May, 2021
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 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 whould 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:
 
clintra
Android-Button
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Navigation Drawer in Android
How to Create and Add Data to SQLite Database in Android?
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
Object Oriented Programming (OOPs) Concept in Java
Reverse a string in Java