Botones en Android Studio: FilledTonalButton OutlinedButton TextButton Column Click Iconos | Jetpack Compose

▶

Vamos a presentar uno de los elementos por excelencia: los botones.

Son sencillos de utilizar y, obviamente, nos permiten interactuar con la aplicación, porque para eso estamos creando una aplicación en Android.

Partimos de esto. Otro punto importante es que, de momento, voy a colocar la implementación de los botones directamente aquí. Más adelante vamos a crear páginas específicas para cada uno de los ejercicios, para poder navegar entre ellas y demás. Por ahora, nos quedamos con esto.

Luego vamos a crear una actividad desde cero, pero aclarado esto un poquito, vamos a comenzar.

Recursos y documentación oficial de Android

Lo primero que quiero comentar es el tema de los recursos. El ecosistema de Android es muy interesante, sobre todo por todo el tiempo que lleva existiendo.

Puedes buscar perfectamente algo como “botones Android” o “Android Studio botones”. Te recomiendo que lo hagas para que no te aparezcan otros tipos de botones que no nos interesan. Vas a encontrar muchísima información.

Algo interesante es que vas a encontrar tanto artículos oficiales como de terceros. Muchos de estos muestran la forma antigua o legacy, implementando interfaces con XML (View System ). Esto, sinceramente, era lo que menos me gustaba de Android y una de las razones por las que lo tenía un poco abandonado:

https://developer.android.com/develop/ui/views/components/button?hl=es-419

Forma antigua vs forma moderna (Compose)

En la documentación antigua puedes ver ejemplos con LinearLayout, que es el layout por excelencia para apilar elementos. Vendría siendo algo similar a una columna si vienes de otras tecnologías.

Ahí puedes colocar botones normales, botones con iconos, etc. Te lo muestro solo como referencia, porque ya no es la forma correcta de trabajar.

La forma moderna es buscar algo como:

“Botones composable Android Studio”.

Es decir, el elemento que queremos usar (botones), seguido de Composable, que es la forma moderna de crear interfaces en Android.

Todo esto parte de Jetpack Compose, que es el toolkit que nos permite crear interfaces gráficas de forma nativa desde Kotlin, directamente en la actividad, y no desde archivos XML:

https://developer.android.com/develop/ui/compose/components/button?hl=es-419

Tipos de botones en Jetpack Compose

Aquí ya entramos en el tema central del post: cómo implementar botones, ya con un proyecto creado en Android Studio.

Como puedes suponer, tenemos varios tipos de botones. No son demasiados, pero hay algunos “sabores” distintos. Todos funcionan igual a nivel de lógica, ya que todos tienen el evento onClick. Lo que cambia principalmente es el estilo visual.

Algunos tipos son:

• Botón lleno (Filled) - Fondo sólido con texto con contrastante.
• Botón tonal - El color de fondo varía para coincidir con la superficie.
• Botón elevado (Elevated) - Botón con sombra.
• Botón con borde (Outlined) - Botón con borde.
• Botón con icono - Botón con ícono.

No vamos a entrar todavía en la parte de colores y estilos avanzados, eso lo veremos más adelante. De momento, quédate con que todos tienen:

• Un evento onClick
• Texto
• Opciones de estilo

Lo primero que hacemos es colocar la anotación @Composable, que permite que nuestra función represente un elemento de interfaz gráfica:

app\src\main\java\com\example\myproyectandroid\MainActivity.kt

@Composable
fun ExamplesButtons() {
    Button(onClick = { /* Acción */ }) {
        Text("Aceptar")
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyProyectAndroidTheme {
       // Greeting("Andasasasroid")
        ExamplesButtons()
    }
}

Luego definimos una función normal en Kotlin, como ya vimos en la introducción básica del lenguaje. El nombre puede ser cualquiera. Yo la voy a usar para definir varios botones, pero de momento será uno solo.

• Este onClick recibe una función lambda que no retorna nada (Unit). De momento no vamos a implementar ninguna acción, solo lo dejamos vacío.

Preview del botón

Ahora, en el Preview, no va a aparecer nada todavía.

Esto es normal, porque para que el Preview muestre algo, tenemos que llamar a nuestro Composable desde la función de preview.

Comentamos lo anterior, llamamos a nuestra función sin parámetros, y listo:

ExamplesButtons()

Ahí tenemos nuestro botón visible en pantalla.

De momento no vamos a trabajar el onClick, ya que el Preview solo muestra la interfaz.

Usando Column para varios botones

Como quiero mostrar varios botones, vamos a introducir otro elemento muy importante: Column.

Column, como su nombre indica, nos permite organizar elementos en forma de columna.
Si vienes de Flutter, esto te va a sonar muchísimo, ya que funciona de manera muy similar.

Dentro de la columna vamos a agregar modificadores:

• fillMaxSize() para ocupar todo el espacio disponible
• padding(16.dp) para agregar espacio en los bordes

Luego colocamos varios botones:

• Un botón normal
• Un botón tonal
• Un botón outlined
• Un botón con icono

Todos funcionan igual, solo cambia el aspecto visual.

app\src\main\java\com\example\myproyectandroid\MainActivity.kt

@Composable
fun ExamplesButtons() {
    Column(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        // 1. Botón Principal (Contained)
        Button(onClick = { /* Acción */ }) {
            Text("Aceptar")
        }

        // 2. Botón con Tono (Menos intenso)
        FilledTonalButton(onClick = { /* Acción */ }) {
            Text("Guardar Borrador")
        }

        // 3. Botón con Borde (Outlined)
        OutlinedButton(onClick = { /* Acción */ }) {
            Text("Editar Perfil")
        }

        // 4. Botón de Texto
        TextButton(onClick = { /* Acción */ }) {
            Text("Cancelar")
        }

        // 5. Botón con Icono
        Button(onClick = { /* Acción */ }) {
            Icon(Icons.Default.Add, contentDescription = null)
            Spacer(Modifier.size(ButtonDefaults.IconSpacing))
            Text("Cancelar")
        }
    }
}

Espaciado y ajustes visuales

El Spacer que usamos sirve para agregar espacio entre el icono y el texto del botón.

Es el valor estándar que recomienda Material Design, pero puedes ajustarlo si quieres:

Modifier.size(ButtonDefaults.IconSpacing)

Por ejemplo:

• Aumentar el espacio entre elementos
• Reducir el padding
• Ajustar márgenes internos

Esto es muy parecido a los margin y padding del desarrollo web tradicional, pero usando unidades propias de Android.

Iconos y dependencias adicionales

Para usar botones con iconos, necesitamos agregar una dependencia adicional:

• la librería de Material Icons Extended.

Esto se hace desde el archivo Gradle, en la sección de dependencias.

1. Registrar la librería en libs.versions.toml

Abre el archivo gradle/libs.versions.toml y añade la referencia en la sección [libraries]:

gradle/libs.versions.toml

[libraries]
# Añade esta línea (puedes usar la versión que prefieras o dejar que el BOM la maneje)
androidx-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }

2. Agregar la dependencia en build.gradle.kts

Ahora, en tu archivo app/build.gradle.kts, implementa la librería que acabas de declarar:

 app/build.gradle.kts

dependencies {
   // ... otras dependencias
   implementation(libs.androidx.material.icons.extended)
}

Una vez agregada, sincronizamos el proyecto y ya podemos importar los iconos sin problemas.

Después de importar todo correctamente, los errores desaparecen y el Preview se actualiza.

GitHub y Git

Subiendo el proyecto

Para finalizar, vamos a sincronizar el proyecto con GitHub.

Entramos en Settings, → Version Control, →GitHub, agregamos la cuenta y autorizamos.

Después creamos un repositorio Git, hacemos nuestro primer commit (por ejemplo, “Botones”), y finalmente hacemos commit & push.

Creamos el repositorio remoto, copiamos la URL, la pegamos y listo.

El proyecto ya queda subido correctamente.

Clonación y Sincronización del Proyecto

Simplemente copiamos la URL de GitHub de nuestro repositorio, desde Android Studio seleccionamos "Clone Repository" en Android Studio y pegamos la dirección. Una vez que confirmamos que confiamos en la fuente, el IDE comenzará a importar el proyecto automáticamente.

Implementación con XML - View System (Legacy)

Los botones al igual que cualquiera interfaz de usuario consisten en un elemento que permite a un usuario interactuar con el sistema; generalmente se encuentran basados en eventos y son muy personalizables; en este artículo veremos cómo definir y utilizar un botón en Android.

En Android los botones pueden constar de texto y/o imagen, clasificandolo en tres tipos de botones:

Texto: Para crear un botón con solo texto, basta con emplear en siguiente XML: 

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Boton" />

Al interpretar el XML anterior:

Imagen: Para crear un botón con una imagen, basta con emplear en siguiente XML:

<ImageButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_action_new" />

Al interpretar el XML anterior:

Texto e Imagen: Para crear un botón compuesto por texto e imágenes, basta con emplear en siguiente XML para definir el botón: 

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_action_new"
        android:text="Boton" />

Al interpretar el XML anterior:

Si queremos que la imagen está alineada a la derecha:

<Button
 	android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_action_new"
        android:text="Boton" />

Al interpretar el XML anterior:

Atributos de los botones

Algunos de los principales atributos de los botones son:

• android:id Identificador del elemento; en este caso del botón; al igual que ocurre con el HTML, es la forma de identificar unívocamente y acceder a un elemento.
• android:text Texto del elemento; en este caso del botón.
• drawable(Left/Right) Con este atributo podemos colocarle una imagen al botón alineado a la izquierda (drawableLeft) o a la derecha (drawableRight).
• layout_width y layout_height Indicamos el ancho y altura respectivamente del elemento; en este caso nuestro botón; puede recibir alguno de los siguientes valores:
  • wrap_content Indica que las dimensiones del elemento serán ajustadas al contenido que presente el mismo:

android:layout_width="match_content" y android:layout_height="wrap_content".

• match_parent Indica que las dimensiones del elemento serán ajustadas a las medias del contenedor; es como la propiedad width o height con el valor 100%:

android:layout_width="wrap_content" y android:layout_height="wrap_content".

• Un valor numérico generalmente en densidades por pixeles (dp) o dpi, pero también se pueden emplear otras como y en pixeles (px) pero esta última no es muy recomendada; ejemplo 50dp.

Por supuesto también se les puede aplicar otros atributos de estilo como lo son:

• android:visibility Permite definir si el elemento será visible o no; igual que la propiedad visibility en CSS.
• android:padding Permite definir el espacio o margen entre el elemento y su contenido; como la propiedad padding en CSS.
• android:background Permite indicar el color de fondo o imagen de un elemento; igual que la propiedad background en CSS.
• android:layout_gravity Permite alinear un elemento; tienen un comportamiento similar a la propiedad float en CSS.
• android:layout_margin Permite definir el espacio o margen entre el elemento y su contenedor; como la propiedad margin en CSS.

Entre muchos otros.

Eventos de los botones

Podemos emplear el atributo:

android:onClick="funcion"

Por ejemplo, si quisiéramos aplicar esta funcionalidad en el primer tipo de botón visto (aunque es posible emplearlo en los tres tipos de botones):

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Alarm"/>
    android:onClick="funcion" 	

En donde "funcion" es el método o función que será invocado en el Activity al momento de aplicarle click en el botón.

public void funcion(View view) {
    // hacemos algo ...
}

Manejador de eventos OnClickListener

También podemos programar el manejador de eventos fuera del XML que forma la interfaz y colocarlos dentro de la Activity:

Button botonButton = (Button) findViewById(R.id.botonButton); botonButton.setOnClickListener(new View.OnClickListener() {    public void onClick(View v) {    // hacemos algo ...    } });

La clase R contiene las referencias a los componentes de nuestra aplicación; básicamente gráficos, elementos y textos globales de la aplicación; con R.id.botonButton podemos acceder al elemento con id botonButton:

android:id="@+id/botonButton"

El siguiente paso es aprender a usar los botones de tipo flotante en Android Studio.