¿Cómo cambiar el color de fondo después de hacer clic en el botón en Android?

En este artículo, veremos cómo podemos cambiar el fondo de la pantalla haciendo clic en un botón. Para esto, usaremos el método onClick() . Cuando hacemos clic en el botón, se llama a la función onClick. Para configurar el evento del controlador de clics para el botón, debemos definir el atributo android:onClick en el archivo XML. También podemos usar onClickListener() en el archivo Java para llamar a esta función mediante programación cuando se hace clic en el botón. qué

Implementación paso a paso

Paso 1: crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Definir colores

Siempre es mejor predefinir strings y colores en lugar de codificarlos, por lo tanto, definiremos los colores.

• Abra el archivo colors.xml navegando a la aplicación -> res -> valores -> colors.xml
• Cree una etiqueta de color dentro de la etiqueta de recursos con un nombre y establezca un color con su código hexadecimal.

Agregue las siguientes líneas dentro del archivo colors.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>

 
Paso 3: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.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>

Paso 4: trabajar con el archivo MainActivity.java 

• Establezca el atributo onClick() con un nombre de función android:onClick=”changeBackground” ,
• Después de eso, en su actividad que alberga este diseño, cree una función con el mismo nombre, o
• En lugar de usar el atributo onClick(), puede establecer directamente onClickListener() y codificar su función
• Dentro de la función use la función setBackgroundResource(R.color.button_color) , esto establecerá el fondo con el color button_color.

A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

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);
            }
        });
    }
}

Producción: