Using Material You colors in your app​​

As many of you android folks already know the Material You was announced some time ago alongside other features in Android 12. It provides the possibility to use colors generated by Material You in our apps. In this article, I wanted to share how to bring this feature into your app.

API

Every time the users change the wallpaper on their device Android generates a new set of colors extracted from or created based on that wallpaper. The set consists of five colors: accent1,accent2,accent3,neutral1 and neutral2. 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_1000  <- the darkest shade of accent color #1

The same goes for accent2, accent3, and so on. You can find documentation for these color resources here:

API reference

Show me the code

To use these colors, we have to set our targetSdk to 31:

// build.gradle
android {
    defaultConfig {
        targetSdk 31
    }
}

Then we add a separate colors.xml for Android 12+ devices: values-31/colors.xml. This file will contain references to material-you colors we want to make use of in our app. It could look like this:

// values-31/colors.xml
<?xml version=”1.0" encoding=”utf-8"?>
<resources>
    <color name=”main_500">@android:color/system_accent1_500</color>
    <color name=”secondary_600">@android:color/system_accent2_600</color>
    <color name=”main_dark_800">@android:color/system_accent1_800</color>
    …
</resources>

The next step would be to reference these colors from our theme:

// themes.xml
<resources xmlns:tools=”http://schemas.android.com/tools">
    <style name=”Theme.MyApp”     parent=”Theme.MaterialComponents.DayNight.DarkActionBar”>
        <item name=”colorPrimary”>@color/main_500</item>
        <item name=”colorPrimaryVariant”>@color/main_dark_800</item>
        <item name=”colorOnPrimary”>@color/white</item>
        <item name=”colorSecondary”>@color/secondary_600</item>
        …
    </style>
</resources>

And voila! Each time you change the wallpaper on your Material You compatible device (e.g. Pixel) your app’s theme will use colors generated based on the image you’ve chosen.

To make it easier for everyone to see which colors it generates and how the shades are different from one another, I’ve implemented a small demo app that showcases everything in one place.

Left: Pixel’s Wallpaper & style, Right: colors available to us through the API.

References

• Demo App on Github: https://github.com/Ch3D/material-you-colors
• Demo App on Google Play: https://play.google.com/store/apps/details?id=com.ch3d.material.color

QR code to the demo app on Google Play