How to use new Material You colors announced for Android 12

Question

Google announced new colors personalization for Android 12 with the "Material You" design.

How can we use these personalized colors from the application?
First of all, I wonder how to use it with the Jetpack Compose UI.

Answer 1

Update (October 27, 2021): Google released official Jetpack Compose support for Material Design 3 (M3) with dynamic color support.
See details, API reference, and full M3 guide.

Material Components library also supports M3 since version 1.5.0-alpha04 or later.

So, every time users change the wallpaper on their device, Android 12 can generate a new set of colors based on that wallpaper. It’s a result of the «Material You» wallpaper-based theming system, codenamed «Monet».

The set consists of five system color groups: accent1, accent2, accent3, neutral1, and neutral2. neutral* colors can be useful for text and backgrounds. Unlike accent*, they are barely colored.

Each color has 13 shades, the lightest being coded with 0, the darkest — 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

All colors are available like @android:color/system_accent1_0 from XML and android.R.color.system_accent1_0 from Kotlin/Java. Values can be overlaid at runtime by OverlayManager RROs!

Official Material Components library introduces the new Material 3 themes (starting from version 1.5.0-alpha03) with «Monet» support named as «dynamic colors» — based on the user’s wallpaper or color choice on the device. See documentation.

WARNING: All these colors are added in API level 31, so don’t forget to check Build.VERSION.SDK_INT for usage and make sure to update your app’s compileSdkVersion to 31.

---

Material You colors showcase:
Left: Pixel’s Wallpaper & style, Right: colors available to us through the API. (source)

Monet colors can be used even in the application icon!
Example of application icon with Monet-based colors on different wallpapers. (source)

---

Simple example of Jetpack Compose UI theme with Material You colors and Day/Night support:

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,
    )
}

---

Official Material Design 3 (M3) color overview:
https://m3.material.io/styles/color/overview

All Material You «Monet» colors references, starting with system_accent1_0:
https://developer.android.com/reference/android/R.color#system_accent1_0

Information sources for this answer: Medium article, Twitter thread.

Demo application from Dmitry Chertenko with «Material You» colors: GitHub, Google Play. Provides a great example of usage with old XML-based UI.