Android 12 & Material You

Material You has been introduced at Google IO'21 and it brings a completely different approach to Android design. For those who missed out on that talk, what Material You wants to achieve is to create a seamless experience for the user by fusing one of the most personal aspects of our phones — the wallpaper — with the whole system.

Pixel users can already experience this after updating to Android 12. You will notice that throughout the operative system, a dynamic accent colour will be picked that is similar to your wallpaper. As per usual, most, if not all, Google apps already support this dynamic colour, bringing said seamless experience to the apps as well. With some clever thinking, you can merge this dynamic colouring with your brand without losing its essence.

For the more technical of us, curiosity takes in and we just might want to test this out. Well, starting with version 1.5.0-alpha04 of the material library, we can check out how our apps look like with dynamic colouring. Let's see what takes to adjust an existing app.

Updating your dependencies

As we just mentioned, we need to make sure we are using a material library that supports the new dynamic colouring functionality. You must use v1.5.0-alpha04 at least. Note this shouldn't break anything in your app.

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

Additionally, we need to target Android 12.

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

Updating the base theme

Assuming your app is well maintained, you'll most likely use the Theme.MaterialComponents.* theme. We need to update this to the new material theme, Theme.Material3.*.

Once we perform this change, you will notice some visual changes. For instance, the buttons will take the round appearance as per the new design system, which you can change later on.

To make this clear, your themes file should look something like the following.

<style name="Theme.YourApp" parent="Theme.Material3.Light">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/blue</item>
    <item name="colorPrimaryVariant">@color/blue_dark</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- additional properties ... -->
</style>

Now that we know what needs to change, it's time to create the full theme. The snippet above is missing quite a few attributes, but we can use the Material Theme Builder tool provided by Google. This tool will take in your primary, secondary and neutral colors and allow you to preview the complete theme palette, which you can then download as Android resource files.

Lastly, import those resource files into your project, replacing theme, and adjust it to match your theme name since the default is AppTheme.* and it might differ from what you have.

Adding that bit of magic 🧙

The changes we did so far do nothing else than updating the look and feel of our app to the new design system. However, dynamic coloring isn't included by default. Since Google always gives us the goodies for free, it only takes a one liner to enable it throughout the application. If you're not specifying a custom Application in your Manifest.xml, you should do so and add the DynamicColors statement as shown below:

class YourApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Under the hood, this will register an ActivityLifecycleCallbacks that intercepts ActivityPreCreated and applies the system generated dynamic color overlay, or one that you may provide.

Showcase

We built a super small app that illustrates a minimal user profile with and without the dynamic coloring applied. If you would like to download the app, it's available on GitHub. On the left you can see the normal version of the app, and on the right with the dynamic colors. Since I'm using a seascape wallpaper, the generated accent colour is a shade of blue.

Conclusion

Since this is a very recent feature and a major change in the design approach, we're not expecting to notice a very large nor quick adoption but we are eager to see what your brand can come up with.

As always, we hope you liked this article and if you have anything to add, we are available via our Support Channel.