Generalidades

Material You – Color dinámico de JetPack Compose | Por Praveen G | Febrero de 2022 | Medio

Ejemplos de capturas de pantalla de la aplicación
Capturas de pantalla de la aplicación de muestra, verifique aquí

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

Paletas de colores en el tema Material You
Captura de pantalla tomada de Generador de temas de materiales

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.

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

Ahora definamos un tema de aplicación componible

asegúrese de que se refiere a la importación

no

Todo está listo, ¿ahora qué?

Usa el AppTheme que acabamos de crear

Ahora use MaterialTheme.colorScheme para colorear su interfaz de usuario

este es el resultado

Ejemplos de capturas de pantalla de la aplicación
Captura de pantalla 1 de la aplicación de ejemplo, ver aquí
Ejemplos de capturas de pantalla de la aplicación
Captura de pantalla 2 de la aplicación de muestra, ver aquí

¡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

LEER  Se anuncia el lector de huellas dactilares debajo de la pantalla del Pixel 6

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba