Cómo agregar botones a tu app

Prueba hacerlo con Compose

Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para agregar componentes en Compose.

Botón →

Un botón consiste en un texto o un ícono (o ambos) que comunica qué acción ocurre cuando el usuario lo presiona.

Puedes crear un botón en tu diseño de tres maneras, según si deseas un botón con texto, un ícono o ambos:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

El código anterior genera algo como lo siguiente:

Cómo responder a eventos de clic

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

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

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

Cómo aplicar estilo a tu botón

La apariencia de tu botón (la imagen de fondo y la fuente) varía entre los dispositivos, ya que los dispositivos de distintos fabricantes suelen tener distintos estilos predeterminados para los controles de entrada.

Para personalizar botones individuales con un fondo diferente, especifica el atributo android:background con un elemento de diseño o un recurso de color. Alternativamente, puedes aplicar un estilo al botón, que funciona de manera similar a los estilos HTML para definir varias propiedades de estilo, como el fondo, la fuente y el tamaño. Para obtener más información sobre cómo 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, excepto que no tienen bordes ni fondo, pero aún cambian de apariencia durante diferentes estados, como cuando se presionan.

Para crear un botón sin bordes, aplica el estilo borderlessButtonStyle al botón, como en el siguiente ejemplo:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

Fondo personalizado

Si realmente deseas redefinir la apariencia de tu botón, puedes especificar un fondo personalizado. Sin embargo, en vez de proporcionar un mapa de bits o color simple, 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 para usar en los diferentes 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. Ubica los mapas de bits en el directorio res/drawable/ de tu proyecto. Nombra cada mapa de bits para reflejar el estado del botón que 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/. Nómbralo como button_custom.xml. Inserta XML como el siguiente:

   <?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 elemento de diseño, que cambiará su imagen en función del estado actual de el botón.

   • El primer <item> define el mapa de bits que se debe usar cuando se presiona el botón (activado).
   • El segundo <item> define el mapa de bits que se debe usar cuando el botón está enfocado, como 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).

   Este archivo en formato XML representa un único recurso de elementos de diseño. Cuando un Button hace referencia a él para su fondo, la imagen que se muestra cambia en función del estado del botón.

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

Para obtener más información acerca de esta sintaxis XML, incluso sobre cómo definir un botón inhabilitado, activado u otro, consulta StateListDrawable.