Botones

Un botón consiste en un texto o un ícono (o ambos) que comunica la acción que ocurrirá cuando el usuario lo toque.

En función de si deseas un botón con texto, un ícono o ambos, puedes crear el botón en tu diseño de tres maneras:

  • Con texto, usando la clase Button: 
    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    ... />
  • Con un ícono, usando la clase ImageButton: 
    <ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    android:contentDescription="@string/button_icon_desc"
    ... />
  • Con texto y un ícono, usando 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"
    ... />

Las clases clave son las siguientes:

Cómo responder a eventos de clic

Cuando el usuario hace clic en un botón, el objeto Button recibe un evento de clic.

Para definir el controlador de evento de clic de un botón, agrega el atributo android:onClick al elemento <Button> en tu diseño XML. El valor de este atributo debe ser el nombre del método al que deseas llamar en respuesta a un evento de clic. La Activity que aloja el diseño debe implementar el método correspondiente.

Por ejemplo, a continuación se muestra un diseño con un botón que usa android:onClick:

<?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" />

En la Activity que aloja este diseño, el siguiente método procesa el evento de clic:

Kotlin

/** Called when the user touches the button */
fun sendMessage(view: View) {
    // Do something in response to button click
}

Java

/** Called when the user touches the button */
public void sendMessage(View view) {
    // Do something in response to button click
}

El método que declares en el atributo android:onClick debe tener una firma que refleje el ejemplo de arriba de forma exacta. Específicamente, el método debe cumplir con lo siguiente:

  • Ser público
  • Mostrarse nulo
  • Definir una View como su único parámetro (que será la View en la que se hizo clic)

Cómo usar un objeto OnClickListener

También puedes declarar el controlador de eventos de clic de forma programática en lugar de hacerlo en un diseño XML. Esto podría ser necesario si creas una instancia de Button durante el tiempo de ejecución o si necesitas declarar el comportamiento de clics en una subclase Fragment.

Para declarar el controlador de eventos de forma programática, crea un objeto View.OnClickListener y asígnalo al botón llamando a setOnClickListener(View.OnClickListener). Por ejemplo:

Kotlin

val button: Button = findViewById(R.id.button_send)
button.setOnClickListener {
    // Do something in response to button click
}

Java

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

Cómo diseñar un botón

La apariencia de un botón (imagen de fondo y fuente) puede variar de un dispositivo a otro, ya que los dispositivos de distintos fabricantes suelen tener estilos predeterminados diferentes para los controles de entrada.

Puedes controlar exactamente cómo se diseñan tus controles mediante un tema que apliques a toda la aplicación. Por ejemplo, para asegurarte de que todos los dispositivos que ejecutan Android 4.0 y versiones posteriores usen el tema Holo en tu app, declara android:theme="@android:style/Theme.Holo" en el elemento <application> de tu manifiesto. Consulta también la entrada de blog Holo Everywhere para obtener información sobre el uso del tema Holo si admites dispositivos más antiguos.

Para personalizar botones individuales con un fondo diferente, especifica el atributo android:background con un elemento de diseño o un recurso de color. De manera alternativa, puedes aplicar un estilo al botón, que funciona de forma similar a los estilos HTML para definir varias propiedades de estilo, como el fondo, la fuente, el tamaño, etc. Si quieres obtener más información para aplicar estilos, consulta Estilos y temas.

Botón sin bordes

Un diseño que puede ser útil es el botón "sin bordes". Los botones sin bordes se parecen a los botones básicos, salvo que no tienen bordes ni fondo, pero aun cambian de apariencia durante diferentes estados, como cuando se hace clic en ellos.

Para crear un botón sin bordes, aplica el estilo borderlessButtonStyle al botón. Por ejemplo:

<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" />

Fondo personalizado

Si quieres redefinir por completo la apariencia de tu botón, puedes especificar un fondo personalizado. Sin embargo, en lugar de proporcionar un mapa de bits o color simples, tu fondo debe ser un recurso de lista de estados que cambie la apariencia según el estado actual del botón.

Puedes definir la lista de estados en un archivo en formato XML que defina tres imágenes o colores diferentes para usar en los distintos estados del botón.

Para crear un elemento de diseño de lista de estados para el fondo de tu botón, haz lo siguiente:

  1. Crea tres mapas de bits para el fondo del botón que representen los estados predeterminado, presionado y enfocado del botón.

    Para asegurarte de que tus imágenes se ajusten a botones de varios tamaños, crea los mapas de bits como Nine-Patch.

  2. Coloca los mapas de bits en el directorio res/drawable/ de tu proyecto. Asegúrate de que cada mapa de bits tenga el nombre adecuado para reflejar el estado del botón que cada uno representa, como button_default.9.png, button_pressed.9.png y button_focused.9.png.
  3. Crea un nuevo archivo en formato XML en el directorio res/drawable/ (asígnale un nombre como button_custom.xml). Inserta el siguiente XML:
    <?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>

    Esto define un único recurso de elementos de diseño, que cambiará su imagen en función del estado actual del botón.

    • El primer <item> define el mapa de bits que se debe usar cuando se presiona el botón (se activa).
    • El segundo <item> define el mapa de bits que se debe usar cuando el botón está enfocado (cuando se resalta el botón con la bola de seguimiento o el mando de dirección).
    • El tercer <item> define el mapa de bits que se debe usar cuando el botón esté en el estado predeterminado (ni presionado ni enfocado).

    Nota: El orden de los elementos <item> es importante. Cuando se hace referencia a este elemento de diseño, los elementos <item> se desvían para determinar cuál es apropiado para el estado del botón actual. Como el mapa de bits predeterminado es el último, solo se aplica cuando se evalúan las condiciones android:state_pressed y android:state_focused como falsas.

    Este archivo en formato XML ahora representa un único recurso de elementos de diseño y, cuando un Button hace referencia a él para su fondo, la imagen que se muestra cambia en función de estos tres estados.

  4. Luego, simplemente, aplica el archivo en formato XML de elemento de diseño 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"  />

Si quieres obtener más información acerca de esta sintaxis XML, incluso para definir un estado inhabilitado, activado u otro del botón, consulta Elemento de diseño de la lista de estados.