Material You in Jetpack Compose

The release of Android 12 brought lots of new features for app developers. The introduction of Material Design 3 was one such addition. Material Design 3 brings a lot of capabilities in the way you approach theming and styling for your apps.

It adds capabilities for users to customize and personalize the colors of their apps. The new approach enables the app to adapt to the user’s set wallpaper. It also introduces lots of improvements to existing Material Design Components.

In this tutorial, you’ll build the ComposeMaterialYou app. The app allows you to create and view calendar events.

During the process, you’ll learn:

• Using Material Design 3 and understanding component changes it brings.
• Migrating from Material Design 2.
• Using Material You personalization features and Material Theme Builder.
• Transition patterns and how to use them in your app.
• Adding Material Motion to your app.

Getting Started

Download the starter project by clicking Download Materials at the top or bottom of the tutorial.

Open Android Studio Bumblebee or later and import the starter project. Build and run the project. You’ll see the following screens:

Since you don’t have any events, you’ll see the No events created message. The other screen is for adding a new event. The app isn’t fully functional yet. You’ll add functionality as you proceed with this tutorial.

Understanding Material Design 3

Every Material Design version adds new amazing features to help developers create even better UIs for their apps. Material Design 3 is no different. It introduces a new set of capabilities to adapt to users’ preferences, allowing users to customize the appearance of most things on their phones. It also provides app support in a more personal feeling, something that wasn’t possible before.

Material Components have a lot of updates too. All these changes will be available to Android 12 users first.

Material Design 3 & Android 12

Android 12 comes with a lot of changes. To highlight some of them:

• Better accessibility support.
• Support for foldable devices.
• Ability to customize the operating system and give it a personal feel.
• Introduction of dynamic color, which enables you to personalize the colors in your apps.
• Very responsive UI.

Including these new features into your apps can give the user a deeply personalized experience.

Migrating From Material Design 2

First of all, you need to have an access to the Material Design 3 library. Make sure you have this dependency in your app build.gradle file:

implementation "androidx.compose.material3:material3:$latest_material_3_version"

This is the Material Design 3 dependency. You can find the latest version on the AndroidX Releases page.

In addition, you need to ensure your app uses the correct imports for all the Material Components. The components should use the androidx.compose.material3 package namespace.

Ready to dive into the migration? Firstly, in your app build.gradle file, set the targetSdkVersion to 31 for Android 12 compilation support. Upgrading targetSdkVersion forces you to set android:exported="true" in all your activities in the manifest file.

Then, focus on styles. In styles.xml, replace Theme.MaterialComponents.* with Theme.Material3.* for themes and Widget.MaterialComponents.* with Widget.Material3.* for widget styles.

Lastly, migrate your colors to the Material3 theme. You also need to add the additional colors for Material Design 3 to support dynamic colors. You’ll see these color changes later in this tutorial.

Typography has also been simplified. The typography variations are now small, medium and large. The Material Components have also gone through some updates. You can read more about the components in this migration to Material Design 3 guide.

Now that you have a bit of background on Material Design 3, you’ll look at Material You.

Understanding Material You

Material You is a new addition in Material Design 3. It focuses more on aspects like personalization and adaptability. Material You makes it easy to customize your app, and it’s also very responsive.

To generate the color scheme that can map with your newly used Material Design 3 components, you’ll use the Material Theme Builder tool.

Using Material Theme Builder

Material Theme Builder is a tool that helps you generate and visualize themes using Material You guidelines. It has a Figma plugin and a web platform too.

Head over to your browser app and open the Material Theme Builder Tool.

As you see in the screen above, you have two tabs at the top — DYNAMIC and CUSTOM. With the first one you can generate your colors from your wallpaper dynamically, and with the second one you can pick the colors manually.

In this tutorial, you’ll choose colors without wallpaper. Click the CUSTOM tab at the top and you’ll see:

By default, the screen shows a set of custom colors that you can change. You’ll change the primary color to:

#006d37

To do this, right-click the primary color circle:

Then, input the color hex code from above and click OK:

After that, your result should be something like this:

Now, your color scheme is ready to export. Click EXPORT at the top-right corner and select Jetpack Compose (Theme.kt).

You just downloaded a zipped file. Navigate to the file and uncompress it. After uncompressing the zip archive, you’ll see these files:

Open the files in your favorite IDE or editor to see the contents.