Material You in Jetpack Compose

Learn how to use the amazing features that come with the new Material Design 3 to create better-looking apps with a more personal feel. By Harun Wangereka.

5 (5) · 1 Review

Download materials
Save for later

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.
Note: This article assumes you have previous experience with Android in Kotlin, Material Design and Jetpack Compose. To start with Kotlin, check out this Introduction to Kotlin for Android tutorial and the book Kotlin Apprentice.
For Android development, check out these Getting Started with Android tutorials and the book Android Apprentice.
If you’re new to Material Design, head over to Introduction to Material Design With Kotlin.
In case you haven’t got your hands dirty with Jetpack Compose yet, start with Jetpack Compose Tutorial for Android: Getting Started.

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:

Add new calendar event screen

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

Note: This section is optional. You can skip ahead to Understanding Material You if you want to start fresh with Material Design 3. However, if you’d like to know how to migrate from Material Design 2 to Material Design 3, you’re in the right place! There’s no need to change ComposeMaterialYou because it doesn’t use Material Design 2. To try out the migration, you’ll need your own app.

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.

Note: Some Material Components haven’t been upgraded at the time of writing this tutorial. There is a possibility you’ll experience issues when changing the 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.

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:

Material Theme Builder With Custom Color Option

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


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

Material theme builder color picker tool with purple selected

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

Material theme builder hex color window

After that, your result should be something like this:

Material theme builder with user-preferred color

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

Export material theme builder colors

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

Theme Files: Color.kt, Theme.kt and Type.kt

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