Temas de aplicación en Jetpack Compose | Autor: Maryam Alhuthayfi | Noviembre de 2021
En todas las aplicaciones, tenemos un esquema de color, estos colores le dan a la aplicación una apariencia única.
El esquema de color consta de los colores principales y auxiliares, así como la superficie, el fondo y otros colores incorrectos de cada tema. En el tema día / luz, los colores son claros y brillantes, en el tema noche / oscuro, los colores son tranquilos y cómodos, lo que puede reducir la fatiga ocular.
Este generador de paleta de materiales de Material Design lo ayudará a generar los colores adecuados para su aplicación.
val teal700 = Color(0xFF00796B)
Como se muestra en la línea anterior, Jetpack Compose usa hexadecimal como formato de color, pero reemplazamos hash # con 0x para que el compilador sepa que es un color. Entonces, FF es responsable de la transparencia del color. FF significa opaco y su valor de transparencia es del 100%.
Después de eso, seis dígitos hexadecimales representan los componentes rojo, verde y azul en secuencia.
Este es un enlace útil al blog de David Walsh, que tiene una tabla con cada símbolo y el porcentaje de transparencia correspondiente. Reemplace «FF» con el símbolo anterior de acuerdo con la transparencia requerida.
En nuestra aplicación para plantas, comencemos a personalizar la aplicación cambiando primero el color. Utilizaremos principalmente cian oscuro y cian claro.
Color.kt
Vaya a la carpeta del tema en el paquete de la aplicación. Luego, abra el archivo color.kt y agregue estos dos colores:
val teal700 = Color(0xFF00796b)val tealDark = Color(0xFF004c40)
Después de hacer esto, nada cambiará en nuestra aplicación porque todavía estamos haciendo referencia a los viejos colores predefinidos. Para cambiarlo, necesitamos modificar el archivo theme.kt.
Para el tema de nuestra aplicación, queremos cian oscuro como la variante principal de color. Y use cian claro como color primario.
Echemos un vistazo a la paleta de colores en el archivo theme.kt.
Subject.kt
Hay dos paletas de colores diferentes, darkColors () y lightColors (), cuyos parámetros se establecen en los valores predeterminados que mencionamos en el tema de la línea de base.
Podemos utilizar colores predefinidos, incluidos negro, gris oscuro, gris, gris claro, blanco, rojo, verde, azul, amarillo, cian, magenta y transparencia.
Queremos que nuestra paleta tenga los siguientes colores:
- Se utilizará principalmente para la barra de aplicaciones.
- La variante principal se utilizará para la barra de estado.
- El fondo se utilizará para todo el fondo de la aplicación.
- Esta superficie se utilizará para tarjetas de plantas.
- En primaria se utilizará para el texto escrito sobre objetos que utilizan colores primarios.
En el archivo Theme.kt, puede notar la función con el nombre de su aplicación debajo de la paleta. De forma predeterminada, esta función toma dos parámetros, que se pueden cambiar y personalizar aún más.
Estos parámetros son un darkTheme booleano que se utiliza para leer si el sistema operativo Android está en modo oscuro. El segundo parámetro toma el contenido como una función componible.
En esta función, configuramos una paleta diferente según el valor de darkTheme, y si el valor cambia, realizará una recombinación.
Después de eso, podemos ver MaterialTheme (), que es parte de Jetpack Compose. Este combinable es responsable de todo el tema de la aplicación, que toma el color, la tipografía, la forma y el contenido como parámetros. El código generado se utiliza para transmitir nuestro color, tipo, forma y contenido.
En cuanto al contenido, se define en MainActivity.
Actividad principal.kt
Antes de ejecutar nuestra aplicación, configuremos la barra de estado para adoptar el color de la variante principal que definimos anteriormente agregando la siguiente línea a nuestro portafolio de temas:
CosmeticsPlantsTheme window.statusBarColor = MaterialTheme.colors.primaryVariant.toArgb() …
Ejecutemos la aplicación y veamos. Debe tener un aspecto como este:
