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