Colores y MaterialTheme
Aplique un tema coherente
Colores y MaterialTheme es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 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.
Colores en Compose
Compose representa los colores con la clase Color. Hay valores ya preparados, como Color.Red y Color.Blue.
Puede pasar un Color a parámetros como el color de un Text o un fondo.
Text(
text = "Hi",
color = Color.Blue
)Valores de color personalizados
Cree cualquier color a partir de un código hexadecimal mediante Color(0xFFRRGGBB). Los dos primeros dígitos, FF, indican que es completamente opaco.
Por ejemplo, 0xFF6200EE es un color morado.
val purple = Color(0xFF6200EE)
Text("Brand", color = purple)Color de fondo
Use el modificador background para pintar detrás de un composable. Añada padding para que el contenido no toque los bordes.
El orden importa: background y después padding hace que el fondo cubra el área del padding.
Text(
text = "Box",
modifier = Modifier
.background(Color.Yellow)
.padding(8.dp)
)¿Qué es MaterialTheme?
MaterialTheme es un sistema que reúne en un solo lugar los colores, las fuentes y las formas de su aplicación.
Los composables leen estos valores para mantener la coherencia de toda la aplicación y facilitar el cambio de estilo.
MaterialTheme {
Text("Themed app")
}Esquema de colores del tema
El colorScheme del tema proporciona roles con nombre, como primary, secondary y background.
Leer estos valores en lugar de usar colores fijos permite cambiar el aspecto desde un solo lugar.
Text(
text = "Primary",
color = MaterialTheme.colorScheme.primary
)Primary y onPrimary
Cada color principal tiene un valor asociado on para el texto que se dibuja sobre él, como onPrimary.
Usar primary como fondo y onPrimary como texto garantiza un contraste legible.
Box(
Modifier.background(MaterialTheme.colorScheme.primary)
) {
Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}Tipografía del tema
MaterialTheme también almacena los estilos de texto en typography, como titleLarge y bodyMedium.
Pase uno de ellos al style de un Text para obtener un texto uniforme y con un tamaño adecuado.
Text(
text = "Heading",
style = MaterialTheme.typography.titleLarge
)Esquemas claro y oscuro
Puede crear un esquema con lightColorScheme() o darkColorScheme() y pasarlo a MaterialTheme.
Cambiar de esquema permite que su aplicación admita los modos claro y oscuro.
MaterialTheme(
colorScheme = darkColorScheme()
) {
Text("Dark mode")
}Personalizar el esquema
Reemplace los roles indicando sus nombres al crear un esquema. Aquí, primary se convierte en un tono teal personalizado.
Todo lo que lea colorScheme.primary se actualiza automáticamente.
val scheme = lightColorScheme(
primary = Color(0xFF018786)
)¿Por qué usar el tema?
Especificar colores directamente en todas partes hace que los rediseños resulten complicados. Leer los valores de MaterialTheme significa que un solo cambio actualiza toda la aplicación.
También favorece la accesibilidad, ya que los colores on mantienen un buen contraste.
Surface y Background
El composable Surface aplica un color de fondo del tema y elevación detrás de su contenido.
Es una forma sencilla de dar a una tarjeta o pantalla el color base adecuado.
Surface(
color = MaterialTheme.colorScheme.background
) {
Text("On surface")
}Comprobación rápida
Compruebe cuánto sabe sobre los colores y los temas.
Resumen
Ha aprendido a usar la clase Color, colores hexadecimales personalizados y el modificador background. MaterialTheme agrupa colorScheme, typography y shapes.
Leer roles como primary y onPrimary mantiene el contraste y la coherencia, y permite usar esquemas claros u oscuros.
¡Excelente trabajo al terminar el curso de estilos!
Preguntas frecuentes
¿La lección «Colores y MaterialTheme» es gratis?
Sí — el texto completo de «Colores y MaterialTheme» 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 «Colores y MaterialTheme»?
Aplique un tema coherente 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 4 de 4.
¿Cuánto tiempo toma la lección «Colores y MaterialTheme»?
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
- Aplicar estilos al texto
- Botones y clics
- Espaciado con Padding
- Colores y MaterialTheme