Botones y clics
Añada botones interactivos
Botones y clics es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.
¿Qué es un botón?
Un Button es un composable que se puede pulsar. Cuando el usuario lo pulsa, la aplicación ejecuta un fragmento de código.
Los botones necesitan una acción onClick y contenido que mostrar, normalmente una etiqueta Text.
Button(onClick = { }) {
Text("Tap me")
}La lambda onClick
El parámetro onClick acepta una lambda, es decir, código dentro de llaves { }. Ese código se ejecuta cada vez que se pulsa el botón.
Puede incluir cualquier lógica, como imprimir información o cambiar datos.
Button(onClick = {
println("Clicked!")
}) {
Text("Click")
}Contenido del botón
El contenido dentro de las llaves finales es un RowScope. Puede colocar Text, Iconos o ambos.
La mayoría de los botones solo contienen una etiqueta Text que describe la acción.
Button(onClick = { }) {
Text("Save")
}Contar clics con State
Para reaccionar a los toques, almacene un valor con remember y mutableStateOf. Cuando cambia, la interfaz se actualiza.
Aquí, cada toque suma uno a count.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}Deshabilitar un botón
El parámetro enabled controla si se puede tocar un botón. Establézcalo en false para mostrarlo en gris y bloquear los clics.
Esto resulta útil mientras un formulario está incompleto.
Button(
onClick = { },
enabled = false
) {
Text("Locked")
}OutlinedButton
OutlinedButton dibuja solo un borde, sin relleno. Funciona de la misma manera, pero tiene un aspecto más ligero.
Úselo para acciones secundarias junto a un Button principal más destacado.
OutlinedButton(onClick = { }) {
Text("Cancel")
}TextButton
TextButton muestra solo una etiqueta, sin borde ni relleno. Es el estilo de botón más discreto.
Es adecuado para acciones de poca importancia, como Omitir o Más información.
TextButton(onClick = { }) {
Text("Skip")
}Colores de los botones
Puede cambiar el color de un Button con ButtonDefaults.buttonColors, pasando un containerColor para el fondo.
Elija colores que coincidan con su marca y sigan siendo legibles.
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Green
)
) {
Text("Go")
}IconButton
IconButton es un área pequeña y redonda que se puede tocar, pensada para un solo Icon, como un corazón o un menú.
No tiene etiqueta, por lo que ahorra espacio en las barras de herramientas.
IconButton(onClick = { }) {
Icon(Icons.Default.Favorite, contentDescription = "Like")
}Dar forma a un botón
El parámetro shape cambia las esquinas. Use RoundedCornerShape con un valor en dp para redondear más los bordes.
Los números más grandes producen botones más suaves, con forma de píldora.
Button(
onClick = { },
shape = RoundedCornerShape(16.dp)
) {
Text("Rounded")
}Nombrar funciones de clic
Para mantener el código ordenado, asigne a onClick una función con nombre en lugar de usar lógica insertada directamente. Así la interfaz resulta más fácil de leer.
Pase la referencia de la función o llámela dentro de la lambda.
fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
Text("Save")
}Comprobación rápida
Compruebe cuánto ha entendido sobre los botones.
Resumen
Ha aprendido que Button usa onClick para su acción y un bloque de contenido para su etiqueta. El estado con remember permite que los clics cambien la interfaz.
También ha visto OutlinedButton, TextButton, IconButton y cómo establecer enabled, colores y shape.
A continuación, controlará el espaciado con padding.
Preguntas frecuentes
¿La lección «Botones y clics» es gratis?
Sí — el texto completo de «Botones y clics» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Botones y clics»?
Añada botones interactivos Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Android Academy?
No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Botones y clics»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Android Academy?
Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.