• Empleos
  • Sobre nosotros
  • Empleos
    • Inicio
    • Empleos
    • Cursos y retos
  • Empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

361
Vistas
Cómo usar los nuevos colores de Material You anunciados para Android 12

Google anunció la personalización de nuevos colores para Android 12 con el diseño "Material You".

¿Cómo podemos utilizar estos colores personalizados desde la aplicación?
En primer lugar, me pregunto cómo usarlo con la interfaz de usuario de Jetpack Compose.

almost 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Actualización (27 de octubre de 2021): Google lanzó el soporte oficial de Jetpack Compose para Material Design 3 (M3) con soporte de color dinámico.
Consulte los detalles , la referencia de la API y la guía completa de M3 .

La biblioteca Material Components también es compatible con M3 desde la versión 1.5.0-alpha04 o posterior.

Entonces, cada vez que los usuarios cambian el fondo de pantalla en su dispositivo, Android 12 puede generar un nuevo conjunto de colores basado en ese fondo de pantalla. Es el resultado del sistema de tematización basado en fondos de pantalla «Material You», cuyo nombre en código es «Monet».

El conjunto consta de cinco grupos de colores del sistema: accent1 , accent2 , accent3 , neutral1 y neutral2 . los colores neutral* pueden ser útiles para el texto y los fondos. A diferencia accent* , apenas están coloreados.

Cada color tiene 13 tonos, el más claro se codifica con 0 , el más oscuro, 1000 :

 system_accent1_0 // the lightest shade of accent color #1 system_accent1_10 system_accent1_50 system_accent1_100 system_accent1_200 system_accent1_300 ... system_accent1_1000 // the darkest shade of accent color #1

Todos los colores están disponibles como @android:color/system_accent1_0 de XML y android.R.color.system_accent1_0 de Kotlin/Java. ¡Los RRO de OverlayManager pueden superponer los valores en tiempo de ejecución!

La biblioteca oficial de componentes de material presenta los nuevos temas de Material 3 (a partir de la versión 1.5.0-alpha03 ) con compatibilidad con «Monet» denominada «colores dinámicos», según el fondo de pantalla del usuario o la elección de color en el dispositivo. Ver documentación .

ADVERTENCIA: Todos estos colores se agregan en el nivel 31 de la API, así que no olvide verificar el uso de Build.VERSION.SDK_INT y asegúrese de actualizar la compileSdkVersion de su aplicación a 31 .


Material Sus colores escaparate:
Izquierda: Fondo de pantalla y estilo de Pixel, Derecha: colores disponibles a través de la API. ( fuente )

¡Los colores de Monet se pueden usar incluso en el ícono de la aplicación!
Ejemplo de icono de aplicación con colores basados en Monet en diferentes fondos de pantalla. ( fuente )


Ejemplo simple del tema Jetpack Compose UI con colores Material You y compatibilidad con día/noche:

 import android.os.Build import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material.MaterialTheme import androidx.compose.material.darkColors import androidx.compose.material.lightColors import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.colorResource val Purple200 = Color(0xFFBB86FC) val Purple500 = Color(0xFF6200EE) val Purple700 = Color(0xFF3700B3) val Teal200 = Color(0xFF03DAC5) val DarkColorPalette = darkColors( primary = Purple200, primaryVariant = Purple700, secondary = Teal200, ) val LightColorPalette = lightColors( primary = Purple500, primaryVariant = Purple700, secondary = Teal200, ) @Composable fun MyAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = when { // Material You colors for Android 12+ Build.VERSION.SDK_INT >= 31 -> { val mainDark700 = colorResource(android.R.color.system_accent1_700) val secondary200 = colorResource(android.R.color.system_accent2_200) when { darkTheme -> darkColors( primary = colorResource(android.R.color.system_accent1_200), primaryVariant = mainDark700, secondary = secondary200, ) else -> lightColors( primary = colorResource(android.R.color.system_accent1_500), primaryVariant = mainDark700, secondary = secondary200, ) } } darkTheme -> DarkColorPalette else -> LightColorPalette } MaterialTheme( colors = colors, content = content, ) }

Resumen de colores oficial de Material Design 3 (M3):
https://m3.material.io/styles/color/overview

Todas las referencias de colores de Material You «Monet», comenzando con system_accent1_0 :
https://developer.android.com/reference/android/R.color#system_accent1_0

Fuentes de información para esta respuesta: artículo medio , hilo de Twitter .

Aplicación de demostración de Dmitry Chertenko con los colores «Material You»: GitHub , Google Play . Proporciona un excelente ejemplo de uso con la interfaz de usuario antigua basada en XML.

almost 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda