Estilizando ToggleButton en Android

Buenas, hoy toca uno de esos artículos que parece que tienen poco que aprovechar pero que en el momento menos pensado nos puede ayudar a darle un punto de estilo a nuestra aplicación. Hoy vamos a ver como estilizar el control ToggleButton.


Este control es una mezcla entre un checkbox y un button, tiene un aspecto muy similar a un button pero funciona como un checkbox, teniendo estado checked y no checked. Os incluyo una imagen para que veáis el aspecto inicial y el que deseamos conseguir.


Lo primero que debemos hacer es crear dos imágenes para nuestro control, una para el off y otra para el on. Una vez listas debemos abrirlas con el programa draw9patch, vimos como utilizarlo en el artículo dedicado  a aplicar estílos a los controles en Android. Aplicamos los correspondientes patch para indicarle como crecerá la imagen y donde irá el contenido. Una vez listas las colocais en la carpeta drawable dentro de vuestro proyecto. Os incluyo las dos imágenes que veis en la imagen anterior ya con el patch si las queréis utilizar.






Ahora vamos a crear dos archivos en la carpeta drawable. El primero le llamaremos toggle_button.xml y tendrá el siguiente código:


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/switch_off" />
    <item android:state_checked="true" android:drawable="@drawable/switch_on" />
</selector>


Lo que estamos haciendo con este primer archivo es un selector que le dirá al control la imagen que va a tener en función de si está chequeado o no. El siguiente archivo le llamaremos toggle_button_bgc.xml y tendrá el siguiente código:


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/background" android:drawable="@android:color/transparent" />
    <item android:id="@+android:id/toggle" android:drawable="@drawable/toggle_button" />
</layer-list>


Si os fijáis, este archivo está utilizando el archivo anterior para setear la imagen del botón y el fondo lo pone transparente.

Ahora vamos a crear un estilo para poder aplicarlo fácilmente a nuestros controles. Para ello dentro de la carpeta values, creamos un archivo llamado styles.xml, si no lo tenemos ya. Y creamos el siguiente estilo:



<style name="Toggle">    
     <item name="android:background">@drawable/toggle_button_bgc</item>
     <item name="android:textOn"></item>
     <item name="android:textOff"></item>
     <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
     <item name="android:layout_width">75px</item>
     <item name="android:layout_height">34px</item>
 </style>


El estilo que hemos creado utiliza como fondo el archivo toogle_button_bgc.xml, también configuramos como vacío el texto que aparecerá para el estado on y off, y otros parámetros como el ancho y alto.

Ahora únicamente nos queda utilizarlo en nuestra aplicación, es muy sencillo, al poner un togglebutton simplemente tenéis que aplicarle este estilo:


<ToggleButton style="@style/Toggle"/>


Como veis, pequeños trucos como este son los que hacen que vuestra aplicación mejore a los ojos del usuario.

Comments are closed.