¿Cómo cambiar el color de fondo del botón en Android usando ColorStateList?

ColorStateList es un objeto que se puede definir en un archivo XML que se puede usar para aplicar diferentes colores en los widgets (como botones , etc.) según el estado de los widgets a los que se aplica . Por ejemplo, hay muchos estados de botones como (presionado, enfocado o ninguno de ellos) y otros estados de widgets como habilitado, verificable, verificado, etc. Usar la Lista de estado de color es una buena manera de cambiar el color del botón sin usar dibujables de forma o imágenes personalizadas. Se debe recordar que la lista de estados de color se puede usar en cualquier lugar donde se use el color. La lista de estados de color se define en XML y se guarda en la carpeta res/color. El elemento raíz de la lista de estados de color es un selectory el elemento del elemento se define para cada estado en el que desea definir el color mediante el uso de atributos de color y alfa. El color predeterminado debe ser el último elemento que se utiliza cuando no se define el color para un estado específico. qué

Background Color of Button

Acercarse

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 Kotlin como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

la actividad_principal.xml ConstraintLayout LinearLayout y dé su orientación vertical. Agregue el botón y cambie al diseño. actividad_principal.xml

XML

<?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>

Paso 3: agregue un directorio de recursos llamado color

Agregue un directorio de recursos llamado color a la carpeta res y mantenga el elemento raíz como selector, ya que queremos seleccionar el color en función del estado. Agregue dos archivos de recursos denominados button_text_color.xml y button_background_color.xml al directorio de recursos de color. Mantenga el selector como elemento raíz por la misma razón que se mencionó anteriormente. Para realizar las cosas anteriores, consulte las siguientes imágenes y códigos. 

Para crear el archivo de recursos de color, haga clic derecho en la carpeta res, haga clic en Nuevo y seleccione Directorio de recursos de Android.

Image representation of how to create the resource directory

Ahora cree el archivo de recursos ( button_text_color.xml y button_background_color.xml ) dentro del directorio de recursos de color haciendo clic con el botón derecho en el directorio de colores y manteniendo el selector como elemento raíz. 

Click on color resource file and enter the respective file names

A continuación se muestra el código para el archivo button_background_color.xml .

XML

<?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>

A continuación se muestra el código para el archivo button_text_color.xml .

XML

<?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>

Paso 4: trabajar con el archivo MainActivity.kt

MainActivity.kt a MainActivity.kt

Kotlin

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

Salida: ejecutar en el emulador

Publicación traducida automáticamente

Artículo escrito por lavishgarg26 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *