Material You – Color dinámico de JetPack Compose | Por Praveen G | Febrero de 2022 | Medio
Hola desarrolladores de Android, con el lanzamiento de Material You en Android 12 y superior, los esquemas de color en las aplicaciones se están volviendo realmente interesantes. Una forma muy personal de mostrar cómo debe verse su aplicación. Según el fondo de pantalla del dispositivo, el algoritmo extrae el color del fondo de pantalla y lo aplica a la interfaz de usuario y las aplicaciones del sistema. ¡Sí! Los colores personalizados en los fondos de pantalla se pueden aplicar dinámicamente a la aplicación. que interesante…
En este artículo, aprenderemos cómo funcionan los colores dinámicos y cómo implementarlos en su aplicación.
¿Cómo funcionan los colores dinámicos?
El algoritmo de Material You extrae el color del fondo de pantalla del usuario y asigna un tipo que determina cómo se relaciona con el esquema de color. Estos valores de color se convierten luego en una paleta de tintes basada en la luminosidad, lo que da como resultado cinco gamas de colores, con tonos que van de claros a oscuros.
De los cinco rangos tonales, los tonos específicos basados en los niveles de luminosidad se dividen en roles predefinidos que forman el esquema.
Paletas de colores en el tema MaterialYou
Pruebe demostraciones en vivo de colores dinámicos o genere paletas a partir de imágenes aquí
Habiendo dicho eso, ¿cómo implementamos esto en nuestra aplicación?
Implementar colores dinámicos
Como de costumbre, comencemos con las dependencias requeridas.
// Required minimum version: 1.5.0
implementation 'com.google.android.material:material:1.5.0'// For use of Material3 in Compose
implementation 'androidx.compose.material3:material3:1.0.0-alpha05'
notas: En el momento de escribir este artículo, compose.material3:material3 todavía está en alfa y está sujeto a cambios importantes. Úselo bajo su propio riesgo.
Definamos un tema alternativo para manejar dispositivos con Android 11 y versiones anteriores, o si el hardware aún no es compatible con Material You
Definir paletas de temas claros/oscuros
private val LightThemeColors = lightColorScheme(
primary = md_theme_light_primary, // and 20+ more color schemes
)private val DarkThemeColors = lightColorScheme(
primary = md_theme_light_primary, // and 20+ more color schemes
)
Ahora definamos un tema de aplicación componible
asegúrese de que se refiere a la importación
import androidx.compose.material3.*
no
import androidx.compose.material.*
Todo está listo, ¿ahora qué?
Usa el AppTheme que acabamos de crear
setContent {
AppTheme {
Surface(
modifier = Modifier.fillMaxSize()
) {
MyAppScreen()
}
}
}
Ahora use MaterialTheme.colorScheme para colorear su interfaz de usuario
Scaffold(
topBar = {
CustomTopBar()
},
backgroundColor = MaterialTheme.colorScheme.surface
)
este es el resultado
¡eso es todo! Espero que este artículo te haya ayudado a comprender cómo implementar temas dinámicos en tu aplicación.
Repositorio Github: https://github.com/praveen-gm/MaterialYou-Compose