Tip Android #07: definir las imágenes de un CheckBox

02/02/2013
android tip

Un checkbox se visualiza en pantalla como una imagen que dependerá del estado del mismo (pulsado y marcado, pulsado y no marcado, seleccionado, etc). Para definir estas imágenes a nuestro gusto y que no se utilicen las que muestre por defecto la versión de Android del dispositivo en que se ejecute nuestra app tendremos que usar un drawable con un selector de estados. Este drawable, por ejemplo customcheckboxselector.xml se lo podemos indicar al CheckBox directamente con el atributo android:button=”@drawable/checkboxselector”, o indirectamente a través de un estilo.

A continuación se muestra un drawable con todos los estados posibles (sólo tendremos que definir los estados que nos interesen, por ejemplo si nuestra app no tiene ningún CheckBox deshabilitado no necesitamos estos botones). Recordad siempre que Android puede soportar la navegación en pantallas no táctiles por ejemplo mediante un cursor (televisores, modelos antiguos de HTC…) de ahí los estados para el foco y seleccionado.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- habilitado + marcado + sin focus -->        
    <item android:state_checked="true" 
          android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />
   
  <!-- habilitado + no marcado + sin focus -->
    <item android:state_checked="false" 
          android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />

  <!-- habilitado +  marcado + focus -->
    <item android:state_checked="true" 
          android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_selected" />

  <!-- habilitado + no marcado + focus -->
    <item android:state_checked="false" 
          android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_selected" />

  <!-- habilitado + marcado + presionado -->
    <item android:state_checked="true" 
          android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_pressed" />

  <!-- habilitado + no marcado + presionado -->
    <item android:state_checked="false" 
          android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_pressed" />

  <!-- habilitado + no marcado -->
    <item android:state_checked="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />

  <!-- habilitado +  marcado  -->
    <item android:state_checked="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />

    <!-- deshabilitado + marcado + sin focus -->
    <item android:state_checked="true" 
          android:state_window_focused="false"
          android:drawable="@drawable/btn_check_on_disable" />

    <!-- deshabilitado + no marcado + sin focus -->
    <item android:state_checked="false" 
          android:state_window_focused="false"
          android:drawable="@drawable/btn_check_off_disable" />

    <!-- deshabilitado + marcado + con focus -->
    <item android:state_checked="true" 
          android:state_focused="true"
          android:drawable="@drawable/btn_check_on_disable_focused" />

    <!-- deshabilitado + no marcado + con focus -->
    <item android:state_checked="false" 
          android:state_focused="true"
          android:drawable="@drawable/btn_check_off_disable_focused" />

    <!-- deshabilitado + no marcado-->
    <item android:state_checked="false" 
          android:drawable="@drawable/btn_check_off_disable" />

  <!-- deshabilitado +  marcado-->
    <item android:state_checked="true" 
          android:drawable="@drawable/btn_check_on_disable" />

</selector>

En cuanto al drawable, se corresponde con una imagen que según su resolución ubicaremos en el directorio correspondiente (drawable-mdpi, drawable-hdpi, etc). Lo mejor es que busquemos dentro de la API de Android los botones para CheckBox que se incluyen a la hora de implementar los nuestros. Las resoluciones que encontramos para estos botones son:

Android 2 Holo
mdpi 38×48 32×32
hdpi 57×72 48×48
xdpi 76×96 64×64
xxdpi 96×96

En la siguiente tabla se muestran los botones de Android 2.2 para la densidad mdpi y hdpi

nombre mdpi hdpi
btn_check_off
btn_check_on
btn_check_on_pressed
btn_check_off_pressed
btn_check_on_selected
btn_check_off_selected
btn_check_on_disable_focused
btn_check_off_disable_focused
btn_check_off_disable
btn_check_on_disable

Se pueden generar las imágenes para un checkbox stilo “Holo” con esta herramienta online.

<< TIPS ANDROID

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: