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 Materials design language. Material You, as Google describes, “seeks to create designs that are personal to any style, accessible to any need, vibrant and tailored to any display.When Google developed Android 12, Google created a new theme engine codenamed “monet”, which generates a rich palette of pastel colors derived from the user’s wallpaper. These colors are then applied to different parts of the system, and their values ​​are made available via an API, which the user’s applications can call, thus letting apps decide if they also want to recolor their UI. Google has gone 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 was first launched with Android 5 Lollipop, with an inherent focus on the user experience. As Google puts it, “Material is an adaptable system of policies, components, and tools that support best practices for user interface design.” It featured flat pastel color palettes, depth, soft lighting and realistic physics. Android 9 Pie saw the emergence of Material Design 2, although it was nowhere near as big 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 the color theme engine away and Material You is actually not to various. In fact, the personal element denoted by “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 is the algorithm that determines which colors are selected from a wallpaper. “Monet” is not fully open source yet, though it should be added to AOSP in Android 12L. Custom ROM developers can meanwhile implement this open source implementation of “monet”. Third-party app developers are free to add dynamic color support right now, though it will 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 choose colors that work together and contrast well every single time. I have tried countless wallpapers with the intention of breaking the color choice algorithm, but none of them have managed to do so. It still chooses colors that work together every time, which to say the least is an impressive feat. To get an insight into how Android 12’s color selection 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 the colors selected by the monet and you can tap it to full screen it. When in full screen, you can tap a color to share it. When you share it, the output looks 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 select primary, secondary, tertiary, and error colors using an initial seed color. Two neutral colors have also been chosen, which gives Material You its overall hue. At the same time, it applies color theory and accessibility rules. Based on these colors, the algorithm creates tonal palettes ranging from 0% luminance (BLACK) to 100% (WHITE). Dynamic Theme or Custom Theme uses values ​​in these tonal palettes to set the theme properties of that color range. It extracts up to 128 colors from the wallpaper to the CIELAB color space as an intermediary, so these colors mapped to CAM16. CAM16 csmell -oneappearance model is used to sort and filter the colors to determine the actual seed color, and then palettes are generated using that seed color. Afterwards, these 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 / brightness, and a * and b * for the four unique colors in human vision – red, green, blue and yellow. Lightness is used to calculate a contrast ratio, which guarantees readability. Once applied, you get all your beautiful system-wide colors that can be implemented in the system’s user interface, apps and more.

What Happened to Runtime Resource Overlays (RROs)?

RROs have not gone anywhere, and Material you work through the Fabricated Overlays API. In the past, we’ve talked about how Fabricated Overlays can be used to bring the rootless theme back. Fabricated Overlays is a new addition to Android 12, and they work a little differently than RROs. First, RROs work through an overlay APK installed on a device, whereas a manufactured overlay simply tells an app what colors to use.

Manufactured overlays are also a little bit more limited than RROs. Before Android 11, RROs could override virtually 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. Manufactured overlays, on the other hand, can only override values ​​that can be represented as integers. It includes integers, dimensions, booleans and colors. You can not use them to override raw data resources, layouts, strings or arrays – at least not easily.

Still, these limitations do not really matter when it comes to Material you and money. Manufactured overlays make it easy for the system to apply color and dimension overlays on the go without waiting for an APK file to be compiled or the system to restart 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 hard to break the basics. For example, if you change your wallpaper quickly, you can effectively launch a paralysis attack. Mishaal Rahman has confirmed that this paralysis attack will be fixed in Android 12L. I sincerely hope that Material You will be improved in future versions as I love it and its concept but it requires a lot of work. From my own personal experience, I feel that its bugginess is partly the reason why it has not been added to the AOSP … that, and the fact that Google probably wants to make it a timed exclusivity for 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 it was based on Android’s overlay-based theme framework. While Android 12’s Material You theme system is more customizable, it does not include the custom styles that Google introduced in Android 10. In a comment on Google Issue Tracker, a Google gave the following justification for the removal:

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

It seems unlikely that Google will reintroduce fonts and custom icon choices in the future. Many users have expressed their disappointment with Google’s Material You changes, and given how corrupt it can be, I fully understand why. We hope that Google improves their implementation, or that other OEMs do not fall into the same traps in their implementations that Google has.

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

Leave a Comment