Android Academy · Lección

Texto, imagen y botón

Use los composables integrados básicos

Texto, imagen y botón es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 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.

Funciones componibles integradas

Compose incluye funciones componibles listas para usar en interfaces habituales. Tres que utilizará constantemente son Text, Image y Button.

La función componible Text

Text muestra una cadena de texto. Su parámetro más importante es text.

@Composable
fun Title() {
    Text(text = "My App")
}

Dar estilo al texto

Text acepta muchos parámetros de estilo, como fontSize, color y fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp frente a dp

Los tamaños de fuente utilizan .sp (píxeles independientes de la escala) para respetar la configuración de accesibilidad del tamaño de fuente del usuario. Los tamaños del diseño utilizan .dp (píxeles independientes de la densidad).

Use sp para el texto y dp para todo lo demás.

La función componible Image

Image muestra una imagen. Use painterResource para cargar un drawable y proporcione siempre contentDescription para la accesibilidad.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

Los lectores de pantalla leen en voz alta contentDescription. Para las imágenes decorativas que no transmiten ningún significado, pase null. Para las imágenes con significado, proporcione una descripción breve.

La función componible Button

Button es un elemento en el que se puede hacer clic. Su parámetro clave es onClick, una lambda que se ejecuta al pulsarlo. La etiqueta del botón se coloca en su lambda de contenido, normalmente mediante un Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Responder a los clics

La lambda onClick es el lugar donde coloca su lógica: actualizar el estado, navegar o llamar a una función.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Lambdas de contenido

Observe que Button recibe una lambda de contenido final. Todo lo que coloque dentro se muestra como contenido del botón, por lo que un botón puede contener un icono y texto, no solo una etiqueta.

Button(onClick = { }) {
    Text(text = "Save")
}

Combinar las piezas

Las interfaces reales combinan estas funciones componibles. Aquí, un título, una imagen y un botón se apilan dentro de una Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Hay muchas más

Además de estas tres, Compose ofrece TextField, Icon, Checkbox, Switch y muchas más. Se aplica el mismo patrón: pasar parámetros y lambdas de contenido.

Comprobación rápida

¿Qué parámetro de Button ejecuta su código cuando el usuario lo pulsa?

Repaso

Ha conocido tres composables fundamentales:

Text — muestra cadenas; puede aplicarles estilo con fontSize y color (use sp).
Image — painterResource + contentDescription.
Button — una lambda onClick y una lambda de contenido.

Preguntas frecuentes

¿La lección «Texto, imagen y botón» es gratis?

Sí — el texto completo de «Texto, imagen y botón» 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 «Texto, imagen y botón»?

Use los composables integrados básicos 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 3 de 4.

¿Cuánto tiempo toma la lección «Texto, imagen y botón»?

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.

Todas las lecciones de este curso

← Volver a Android Academy