Botones

Un botón es una zona rectangular que puede contener un texto, un icono o un texto más un icono y que cuando es pulsado realiza una acción.

Para crear los botones de la imagen anterior en nuestra plantilla, procederemos de la siguiente manera:

• Si queremos mostrar texto, utilizaremos la clase Button:
  

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/button_text"
      ... />
  

• Si queremos mostrar un icono, utilizaremos la clase ImageButton:
  

  <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/button_icon"
      ... />
  

• Si queremos mostrar un texto y un icono, utilizaremos la clase Button y el atributo android:drawableLeft:
  

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/button_text"
      android:drawableLeft="@drawable/button_icon"
      ... />
  

Respondiendo al evento clic.

Cuando el usuario pulsa un botón, éste recibe el evento clic. Para la gestión del evento, el elemento Button nos proporciona el atributo android:onClick. El atributo espera como valor el nombre del método encargado de procesar el evento y que será implementado por la actividad asociada a la plantilla. Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage" />

Dentro de la actividad implementamos el método asociado al evento clic:

 /** Llamado cuanto el usuario pulsa el botón */
public void sendMessage(View view) {
    // Hacemos algo cuando el usuario pulsa el botón.
}

El método que utilicemos como valor del atributo android:onClick debe tener la misma signatura del ejemplo, es decir, que debe cumplir con los siguientes requisitos:

• Ser público.
• Devolver void.
• Definir un solo argumento de tipo View (la vista que recibe el evento).

Utilizando la interfaz OnClickListener.

La gestión del evento clic de un botón también se puede hacer desde el código de una actividad o fragmento en tiempo de ejecución. Para ello, implementamos la acción a realizar a través de la interfaz View.OnClickListener y la asociamos al evento del botón con el método setOnClickListener(View.OnClickListener). Por ejemplo:

// Obtenemos el botón de la plantilla.
Button button = (Button) findViewById(R.id.button_send);

// Asociamos la implementación de la acción al evento del botón.
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Hacemos algo cuando el usuario pulsa el botón.
    }
});

En el ejemplo observamos como la implementación y la asignación se han hecho en un solo paso utilizando una clase anónima de Java.

Dando estilo al botón.

La apariencia de un botón (su imagen de fondo y su tipo de letra) puede variar de un dispositivo a otro. Esto es debido a que los fabricantes de dispositivos a menudo utilizan sus propios estilos a la hora de mostrar los controles en la interfaz.

Podemos controlar exactamente cómo queremos que sea la apariencia de nuestros controles definiendo el tema que queremos usar para nuestra aplicación. Por ejemplo, para asegurar que todos los dispositivos que ejecutan la versión 4.0 de Android o superior usan el tema Holo para nuestra aplicación, utilizaremos el atributo android:theme="@android:style/Theme.Holo" del elemento <application> dentro del archivo manifest.

Para personalizar un botón con un fondo diferente al que tiene por defecto, utilizaremos el atributo android:background al que le asignaremos un recurso de tipo imagen res/drawable/ o un recurso de tipo color res/values/. En cualquier caso, podremos aplicar distintos estilos a un botón de la misma manera a como lo hacemos en HTML con los estilos CSS, especificando propiedades del tipo background, font, size, etc.

Botones sin borde.

En ocasiones puede sernos útil cambiar el aspecto de un botón eliminando sus bordes y fondo por defecto. Para conseguir un botón de estas características, le aplicaremos el estilo borderlessbuttonStyle de la siguiente manera:

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    style="?android:attr/borderlessButtonStyle" />

Personalizando el fondo.

Si lo que deseamos es cambiar realmente el aspecto de un botón podemos hacerlo personalizando su fondo. En vez de especificar una imagen o color de fondo fijos, podremos usar un recurso especial en el que se definan las imágenes o colores de fondo que serán mostrados en función del estado del botón.

Un botón puede pasar por cualesquiera de los siguientes estados:

• Por defecto. El botón ni tiene el foco ni está siendo presionado.
• Obtiene el foco. El botón tiene el foco.
• Pulsado. El botón está siendo pulsado por el usuario.

Para asociar un recurso de tipo lista de estados a un botón procederemos de la siguiente manera:

1. Creamos tres imágenes de mapa de bits para el fondo del botón en función de sus tres estados posibles: por defecto, pulsado y cuando tiene el foco. Para asegurarnos que las imágenes se ajustan al botón, éstas serán de tipo Nine-patch.
2. Metemos las imágenes en la carpeta res/drawable/ de nuestro proyecto. Nos aseguramos de que tengan los nombres correctos en función del estado que representan: button_default.9.png, button_pressed.9.png y button_focused.9.png.
3. Creamos el recurso res/drawable/button_custom.xml para asociar los estados del botón con las imágenes:
   

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/button_pressed"
             android:state_pressed="true" />
       <item android:drawable="@drawable/button_focused"
             android:state_focused="true" />
       <item android:drawable="@drawable/button_default" />
   </selector>
   

   donde:
   
   • El primer elemento <item> define la imagen cuando el botón es pulsado.
   • El segundo elemento <item> define la imagen cuando el botón tiene el foco.
   • El tercer elemento <item> define la imagen para el estado por defecto.
   
   Nota. El orden de los elementos <item> es importante.
   
   
4. Ahora podremos usar el archivo XML anterior para usarlo como fondo del botón:
   

   <Button
       android:id="@+id/button_send"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/button_send"
       android:onClick="sendMessage"
       android:background="@drawable/button_custom"  />