Hola, retomando el tutorial anterior acerca de selectores. Continuaré con este segundo tutorial para mejorar la apariencia de un togglebutton en Android.
El togglebutton que viene por default en Android es este:
Primero que nada, la apariencia no es atractiva para un usuario y segundo, los colores son los clásicos grises. La intención con este tutorial es substituir esa apariencia común y corriente, por una más personalizada. Para este ejemplo usaré las siguientes imágenes.
Repetiremos los pasos del tutorial anterior, colocando las 2 imágenes dentro de la carpeta drawable, para posteriormente crear un nuevo archivo también dentro de la carpeta drawable con el nombre selector_toggle.xml. La estructura de nuestro proyecto quedaría de la siguiente forma.
El siguiente paso es editar el archivo selector_toggle.xml, de tal forma que queda de la siguiente manera:
Los togglebutton en Android, tienen 2 estados android:state_checked=”false” y android:state_checked=”true”. Es por eso que en nuestro selector estamos definiendo una imagen distinta para cada estado del togglebutton.
De esta forma, quedaría definido el selector para nuestro togglebutton, por lo que colocamos un togglebutton dentro del archivo main.xml y escribimos lo siguiente en su propiedad background android:background=“@drawable/selector_toggle” . De tal forma que nos queda así.
Se aprecia claramante que nuestro togglebutton ya presenta el diseño que predefinimos en el selector. Sin embargo aún aparece el texto ON y OFF respectivamente. Para quitarlos y dejar nuestro togglebutton tal como lo queremos. Es necesario definir un estilo o style.
Los estilos o styles, nos van a permitir especificar el aspecto de un elemento de la interfaz gráfica. Es muy semejante a las hojas de estilo CSS utilizadas en desarrollo web y se definen en un archivo xml llamado styles.xml dentro de nuestro proyecto. En las versiones más recientes del ADT plugin de Eclipse, este archivo se genera al crear un proyecto nuevo. Sin embargo si no se tiene definido, se puede crear haciendo click derecho en la carpeta values de nuestro proyecto y agregando un archivo xml llamado precisamente styles.xml.
El contenido del archivo styles.xml debe ser el siguiente:
En este caso, estamos definiendo un style llamado toggle que hereda propiedades de android.Widget y que el texto cuando el togglebutton esta activado al igual que cuando no lo esta es nulo. Ya que no hay nada entre los tags de
Lo que finalmente nos dará el siguiente resultado:
Si queremos verificar el funcionamiento de nuestro togglebutton escribimos el siguiente código en nuestra actividad principal. El cual solo muestra un mensaje de acuerdo al estado del togglebutton.
Adjunto una liga para descargar el proyecto.
