Vamos a ver cómo se pueden personalizar los botones de nuestra aplicación, pero no modificando bordes del botón, tamaño y demás, estoy hablando de crear botones a partir de imágenes que consigan sensación de movimiento al realizar determinada acción. Veamos cómo.

Sobre un nuevo proyecto, creamos el fichero boton.xml en el directorio res/drawable y escribimos el siguiente código:

boton.xml

Este XML define un recurso único gráfico (drawable) que cambiará en función del estado del botón. El primer <item> define la imagen usada cuando se pulsa el botón, el segundo <item> define la imagen usada cuando el botón tiene el foco (cuando el botón está seleccionado con la rueda de desplazamiento o las teclas de dirección), el tercero la imagen en estado normal.

El orden de los <item> es importante. Cuando se va a dibujar se recorren los ítems en orden hasta que se cumpla una condición. Debido a que “botonnormal” es el último, sólo se aplica cuando las condiciones state_pressed y state_focused no se cumplen.

Las imágenes usadas para crear el botón son las siguientes

botonnormal.png

botonpulsado.png

botonconfoco.png

Al escribir el código así de primeras saldrá error al escribir la ruta de las imágenes. Eso se arregla agregándolas a la carpeta res/drawable del proyecto.

Ahora en el diseño del Layout eliminamos el TextView existente (como siempre) y especificamos que el RelativeLayout tenga la propiedad Background blanca (#FFFFFF en hexadecimal).

Layout con fondo blanco

Dentro del RelativeLayout arrastramos un Button y le indicamos que su propiedad Background sea Drawable/boton. Esa opción la encontraremos entrando en el selector de recursos (los puntos suspensivos)

Selector de recursos

Modificamos el atributo Text para que no tenga ningún valor

Atributo Text vacío

Ve al fichero con las funciones programables java e introduce al final, antes de la última llave, el siguiente código

Código Java sePulsa

Vuelve al diseño del Layout y modifica la propiedad onClick dándole el valor sePulsa.

Propiedad onClick

Y al ejecutar el programa podremos ver cómo se comporta nuestro botón, animándose y mostrando un mensaje cuando es pulsado.

Aplicación ejecutándose