Switch
Explicación del concepto de Switch.
DEFINICIÓN
Hereda de:
Un Switch es un botón deslizante que permite elegir entre dos opciones. El usuario puede deslizar hacia un lado o hacia el otro para seleccionar o simplemente tocar el botoón como si fuera un CheckBox.
USO DESDE XML
<Switch
android:id="@+id/swEjemplo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¿Recibir Newsletter mensual?"
android:showText="true"
android:textOff="No"
android:textOn="Si"/>
ATRIBUTOS
android:showText
Indica con un Booleano si se muestra el texto de los atributos android:textOn y android:TextOff sobre el thumb.
android:splitTrack
Indica con un Booleano si se separa el Thumb del Track (true) o si se mantienen como si el Track estuviera debajo del Thumb (false).
android:switchMinWidth
Define la anchura mínima del botón.
android:switchPadding
Define la distancia mínima entre el Texto de android:text y el botón.
android:switchTextAppearance
Define la Apariencia del texto que se muestra sobre el Thumb, es decir el que se define en android:textOn y en android:textOff.
android:textOff
Define el texto que se muestra en el Thumb cuando el botón está en estado desmarcado.
android:textOn
Define el texto que se muestra en el Thumb cuando el botón está en estado desmarcado.
android:textStyle
Define el estilo del texto que se muestra con el atributo android:text.
android:thumb
Define el drawable que se muestra en el Thumb.
android:thumbTextPadding
Define el espacio entre los lados del Thumb y el texto en su interior.
android:thumbTint
Define el color del Thumb.
android:thumbTintMode
Define el modo de color del Thumb.
android:track
Define el drawable que se muestra en el Track.
android:trackTint
Define el color del Track.
android:TrackTintMode
Define el modo de color del Track.
android:typeface
El tipo de texto que se va a utilizar (normal, sans, serif, monospace).
PROGRAMAR EVENTOS DESDE CÓDIGO
La dinámica que siguen los Switch es similar a la de los ToggleButton por lo que vamos a utilizar el mismo código:
package com.example.android.appdeejemplo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Switch
import android.widget.Toast
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tbReady: Switch = findViewById(R.id.swEjemplo)
tbReady.setOnCheckedChangeListener{_, isChecked ->
if (isChecked) Toast.makeText(this, "¡Perfecto! Se la enviaremos pronto.",
Toast.LENGTH_SHORT).show()
else Toast.makeText(this, "¡Que lástima! No sabe lo que se pierde.",
Toast.LENGTH_SHORT).show()
}
}
}
PERSONALIZACIÓN
Si quiero personalizar en profundidad el Switch, voy a necesitar crear una View del tipo SwitchCompat, igual que pasaba con los Button.
El link se encuentra al inicio de la página.
En este caso vamos a personalizarlo igual que los ToggleButton pero con imágenes vectoriales.
Para ello vamos a necesitar personalizar por un lado el Thumb y por el otro el Track.
El diseño será el siguiente:
Personalizar Thumb
Vamos a utilizar una lista de estados para el Thumb:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#fff"></solid>
<size android:width="50dp"
android:height="40dp"></size>
<corners android:radius="40dp"></corners>
<stroke android:width="2dp" android:color="@color/colorOn"></stroke>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#fff"></solid>
<size android:width="50dp"
android:height="40dp"></size>
<corners android:radius="40dp"></corners>
<stroke android:width="2dp" android:color="@color/gray"></stroke>
</shape>
</item>
</selector>Personalizar Track
Vamos a utilizar otra lista de estados para el Track:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/colorOn"></solid>
<corners android:radius="200dp"></corners>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="@color/gray"></solid>
<corners android:radius="200dp"></corners>
</shape>
</item>
</selector>Añadirlo al layout
<?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"/>
<Switch
android:id="@+id/swEjemplo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="¿Recibir Newsletter mensual?"
android:showText="true"
android:textOff="No"
android:textOn="Si"
android:thumb="@drawable/sw_thumb"
android:track="@drawable/sw_track"
android:switchPadding="10dp"
android:checked="true"/>
</LinearLayout>
Last updated