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 .
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
<?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.
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); } }); } }
Producción:
Publicación traducida automáticamente
Artículo escrito por namanjha10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA