ToggleButton
Explicación del concepto de ToggleButton
DEFINICIÓN
Hereda de:
Un botón que muestra el estado marcado (checked) y desmarcado (unchecked) con un indicador luminoso y por defecto el texto "ON" u "OFF".
USO DESDE XML
<ToggleButton
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ToggleButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"/>
ATRIBUTOS
android:disabledAlpha
Define el valor de transparencia del ToggleButton cuando se encuentra deshabilitado. Debe ser un valor de coma flotante entre 0.0 (completamente transparente) y 1.0 (completamente visible).
android:textOff
Define el texto que se muestra en el ToggleButton cuando está en estado desmarcado.
android:textOn
Define el texto que se muestra en el ToggleButton cuando está en estado marcado.
PROGRAMAR EVENTOS EN CÓDIGO
La programación de eventos para los CheckBox no tiene ninguna dificultad con respecto a los que hemos visto anteriormente por lo que solamente vamos a ver el código:
package com.example.android.appdeejemplo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import android.widget.ToggleButton
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tbReady: ToggleButton = findViewById(R.id.tbReady)
tbReady.setOnCheckedChangeListener{_, isChecked ->
if (isChecked) Toast.makeText(this, "¡Estamos listos! Comenzamos...",
Toast.LENGTH_SHORT).show()
else Toast.makeText(this, "Vamos a descansar un rato...",
Toast.LENGTH_SHORT).show()
}
}
}<ToggleButton
android:id="@+id/tbReady"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textOn="Estoy listo"
android:textOff="Vamos a descansar..."/>
PERSONALIZACIÓN
Como pueden ver, el ToggleButton tiene un diseño muy concreto, además de no muy atractivo.
En este apartado vamos a ver una opción de personalización que permite modificar el botón al completo. Esto lo vamos a hacer con conocimientos que ya hemos adquirido a lo largo del curso.
Lista de estados:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:enterFadeDuration="@android:integer/config_shortAnimTime"
android:exitFadeDuration="@android:integer/config_shortAnimTime">
<item android:drawable="@drawable/tb_ready_on" android:state_checked="true" />
<item android:drawable="@drawable/tb_ready_off" android:state_checked="false" />
</selector>tb_ready_on
En este caso, no son imagenes vectoriales sino simples imagenes en formato png:
tb_ready_off
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pulse el botón cuando se sienta preparado:"
android:paddingBottom="30dp"/>
<ToggleButton
android:id="@+id/tbReady"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tb_ready_bg"
android:textOn="@null"
android:textOff="@null"/>
</LinearLayout>
Last updated