Material You’s monet theme engine is the big highlight of Android 12, and here’s how it works
By far the biggest change in Android 12 is Material You, the latest version of Google’s Material design language. Material You, as Google describes, “seeks to create designs that are personal for every style, accessible for every need, alive and adaptive for every screen.” When developing Android 12, Google created a new theme engine code-named “monet” that generates a rich palette of pastel colors derived from the user’s wallpaper. These colors are then applied to various parts of the system and their values are made available through an API that the user’s applications can call, thus letting apps decide whether they also want to recolor their UI. Google has been going all-in on Material You, and the company has updated most of its apps to incorporate dynamic colors.
For a crash course on the history of Material Design, it first launched with Android 5 Lollipop, with an inherent focus on the user experience. As Google puts it, “Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.” It featured flat, pastel color palettes, depth, soft lighting, and realistic physics. Android 9 Pie saw the advent of Material Design 2, though it was nowhere near as large a visual overhaul as the first Material Design iteration was. Android 12 saw the launch of Material Design 3, which is a more significant overhaul.
However, take away the color theming engine, and Material You isn’t actually that different. In fact, the personal element denoted by the “You” more or less entirely goes away.
How the monet theme engine works
The “monet” theme engine is where the magic happens when it comes to Material You, and it’s the algorithm that decides what colors are selected from a wallpaper. “Monet” isn’t fully open source yet, though it should be added to AOSP in Android 12L. Custom ROM developers, meanwhile, can implement this open-source implementation of “monet”. Third-party app developers are free to add support for dynamic colors right now, even if it’ll only work on Pixel phones running the latest release or custom ROMs.
The first question I’m sure most people have about Material You is how it manages to select colors that work together and contrast well together every single time. I’ve tried countless wallpapers with the intention of breaking the color-picking algorithm, but none of them have managed to do it. It still picks colors that work together every time, which is an impressive feat, to say the least. To get an insight into how Android 12’s color-picking algorithm works, one of the two easter eggs comes in the form of a widget that you can add to your desktop. The widget shows all of the colors selected by monet, and you can tap it to full-screen it. When it’s in full screen, you can then tap a color to share it. When you share it, the output looks like the following:
A1-600 (@android:color/system_accent1_600)\ncurrently: #626200
When a user changes their wallpaper on an Android 12 device, the image is analyzed to select a color and algorithmically choose Primary, Secondary, Tertiary, and Error colors using an initial seed color. Two neutral colors are also chosen which give Material You its overall tint. At the same time, it is applying color theory and accessibility rules. From these colors, the algorithm creates tonal palettes ranging from 0% luminance (BLACK) to 100% (WHITE). Dynamic theming or custom theming uses values in these tonal palettes to set the theme attributes for that color range. It extracts up to 128 colors from the wallpaper to the CIELAB color space as an intermediary, then those colors are mapped to CAM16. The CAM16 color appearance model is used for sorting and filtering the colors to determine the actual seed color, and then palettes are generated using that seed color. Afterward, those colors are mapped back to RGB for setting colors throughout the system.
CIELAB is sometimes also referred to as “L*a*b*”. L* for perceived brightness/lightness, and a* and b* for the four unique colors of human vision — red, green, blue, and yellow. The lightness is used for calculating a contrast ratio, guaranteeing readability. Once applied, you get all of your pretty system-wide colors that can be implemented into the system UI, apps, and more.
What happened to Runtime Resource Overlays (RROs)?
RROs haven’t gone anywhere, and Material You works through the Fabricated Overlays API. In the past, we’ve talked about how Fabricated Overlays can be used to bring back rootless theming. Fabricated Overlays are a new addition to Android 12, and they work slightly differently from RROs. For one, RROs work through an overlay APK installed on a device, whereas a Fabricated Overlay simply tells an app what colors to use.
Fabricated Overlays are also a small bit more limited than RROs. Before Android 11, RROs could override pretty much any resource: booleans, integers, dimensions, attributes, layouts, and even raw data files. Android 11 made some changes to how RROs work, making overriding layouts not really feasible anymore. Fabricated Overlays, on the other hand, can only override values that can be represented as integers. That includes integers, dimensions, booleans, and colors. You can’t use them to override raw data resources, layouts, strings, or arrays — at least not easily.
Still, these limitations don’t really matter when it comes to Material You and monet. Fabricated Overlays make it easy for the system to apply color and dimension overlays on the fly, without waiting for an APK to compile or the system to reboot to apply it.
Material You needs a lot of work
Material You’s dynamic colors are certainly not without their problems, and it’s not all that hard to break it fundamentally. If you change your wallpaper quickly, for instance, you can effectively institute a denial of service attack. Mishaal Rahman has confirmed that this denial of service attack will be fixed in Android 12L. I sincerely hope that Material You is improved upon in future versions, as while I love it and its concept, it needs a lot of work. From my own personal experience, I feel that its bugginess is partially why it hasn’t been added to AOSP… that, and the fact that Google probably wants to effectively make it a timed exclusive for the Pixel series.
Annoyingly, Android 12 removed custom font and custom icon choices in favor of Material You’s dynamic theming. The theming system was first introduced with the Pixel Themes app, and it was based on Android’s overlay-based theming framework. While Android 12’s Material You theming system is more customizable, it doesn’t feature the custom styles Google introduced in Android 10. In a comment on the Google Issue Tracker, a Googler gave the following reasoning for its removal:
“The custom style features (font, icon shape, icon pack, and accent color) in R are being replaced by the new dynamic theming feature that we are introducing in S. We see the new dynamic theming feature as more modern and intelligent. A simple and delightful experience that we hope all users can get to enjoy.”
It seems unlikely that Google will re-introduce fonts and custom icon choices in the future. Many users have voiced their disappointment in Google’s Material You changes, and given how broken it can be, I completely understand why. We’re hopeful that Google improves their implementation, or that other OEMs don’t fall into the same traps in their implementations that Google has.
Changes in Android 13 Developer Preview 2
Google is working on improving Material You for the release of Android 13, and one of its first improvements looks like it will pack up to five additional color styles. These new color styles are called TONAL_SPOT, VIBRANT, EXPRESSIVE, SPRITZ, RAINBOW, and FRUIT_SALAD. We have taken screenshots and shown them below.
- TONAL_SPOT: Default Material You colors
- VIBRANT: Generates a more tonal palette with slightly varying hues and more colorful secondary and background colors
- EXPRESSIVE: Generates a palette with multiple prominent hues that are more colorful than VIBRANT
- SPRITZ: Generates a more low-color palette