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, “strives for designs that are personal to every style, accessible to every need, vibrant and adaptive to every screen.In developing Android 12, Google created a new theme engine code-named “monet” that generates a rich palette of pastels derived from the user’s background. These colors are then applied to different parts of the system and their values ​​are made available through an API that the user’s applications can call, allowing apps to decide whether to recolor their user interface as well. Google is going all-in for Material You, and the company has updated most of its apps to include 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, “Materials are a customizable system of guidelines, components, and tools that support best practices in user interface design.” It featured flat, pastel palettes, depth, soft lighting, and realistic physics. Android 9 Pie saw the arrival of Material Design 2, although it wasn’t nearly as big a visual overhaul as the first Material Design iteration. Android 12 saw the launch of Material Design 3, which is a major overhaul.

Take away the color theme engine though, and Material You actually isn’t Which different. In fact, the personal element denoted by the “You” more or less disappears completely.

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 determines which colors are selected from a background. “Monet” is not yet fully open source, although 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 now free to add dynamic color support, even if it only works on Pixel phones with 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 match and contrast well every time. I’ve tried countless wallpapers with the intention of breaking the color picker 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 help you understand how Android 12’s color choice algorithm works, one of two Easter eggs comes in the form of a widget that you can add to your desktop. The widget shows all the colors selected by monet and you can tap it to view it in full screen. When it’s full screen, you can tap a color to share it. When you share it, the output will look like this:

A1-600 (@android:color/system_accent1_600)
currently: #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 have also been chosen to give Material You its overall hue. At the same time, it applies color theory and accessibility rules. Based on these colors, the algorithm creates tone palettes ranging from 0% luminance (BLACK) to 100% (WHITE). Dynamic themes or custom themes use values ​​in these tone 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 intermediate, then those colors are assigned to CAM16. The CAM16 Codor Anappearance model is used to sort and filter the colors to determine the actual seed color, then palettes are generated using that seed color. Then those colors are reset to RGB to set colors throughout the system.

CIELAB is sometimes 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 to calculate a contrast ratio, ensuring readability. Once applied, you’ll get all your beautiful system-wide colors that can be implemented into the system’s 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 themes. Manufactured overlays are a new addition to Android 12 and work slightly differently from RROs. First, RROs work through an overlay APK installed on a device, while a manufactured overlay simply tells an app what colors to use.

Manufactured overlays are also slightly more limited than RROs. Before Android 11, RROs could overwrite just about any resource: booleans, integers, dimensions, attributes, layouts, and even raw data files. Android 11 has made some changes to the way RROs work, making overriding layouts not really feasible anymore. Manufactured 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 overwrite raw data sources, layouts, strings, or arrays – at least not easily.

Still, these restrictions don’t really matter when it comes to Material You and money. Manufactured overlays allow the system to easily apply color and dimension overlays without having to wait for an APK to compile or reboot the system to apply it.

Material You need a lot of work

Material You’s dynamic colors are certainly not without problems, and it’s not that difficult to fundamentally break it. For example, if you quickly change your wallpaper, you can effectively perform a denial of service attack. Mishaal Rahman has confirmed that this denial of service attack will be fixed in Android 12L. I sincerely hope Material You gets better in future versions because while I love it and the concept of it, it needs a lot of work. From my own personal experience, I feel like the bugginess is partly why it hasn’t been added to AOSP… that, and the fact that Google probably wants to make it a timed exclusive to the Pixel series.

Annoyingly, Android 12 removed custom fonts and custom icon choices in favor of Material You’s dynamic theme. The theme system was first introduced with the Pixel Themes app and was based on Android’s overlay-based theme framework. While Android 12’s Material You theme system is more customizable, it doesn’t include the custom styles that Google introduced in Android 10. In a comment about the Google Issue Tracker, a Googler gave the following rationale for its removal:

“The custom style features (font, icon shape, icon pack, and accent color) in R are replaced by the new dynamic theme feature that we are introducing in S. We consider the new dynamic theme feature to be more modern and intelligent. A simple and delightful experience that we enjoy hope all users can enjoy it.”

It seems unlikely that Google will reintroduce fonts and custom icon choices in the future. Many users have expressed disappointment with Google’s Material You changes, and given how broken it can be, I fully understand why. We’re hopeful that Google improves their implementation, or that other OEMs don’t fall into the same pitfalls as Google.

Thanks to XDA Senior Member kdrag0n, developer of both ProtonAOSP and a recreation of the Material You theme system, for their help with this article!

Leave a Comment