Howzit?
My name is Nick Rout,
and I’m an Android Developer Relations Engineer.
Today, I’m excited to talk about how to implement Material You in Jetpack Compose.
Material You is the next evolution of Material Design.
It’s a radical new design vision,
focused on delivering experiences
that are personal for every style, accessible for every need and adaptive for every screen.
Jetpack Compose is Android’s new, modern, native UI toolkit
to help you build better apps, faster.
You may be familiar with the existing Compose Material library.
It’s based on the Material Design 2 specification
and includes features like Material Theming, Material Components, and dark theme.
We’re excited to announce the launch of the new Compose Material 3 Jetpack library,
available in Alpha today.
It’s based on the Material Design 3 specification,
with updated Theming and Components, and includes Material You
personalization features like dynamic color,
and designed to be cohesive with the new Android 12 visual style and system UI.
You can begin by adding the new androidx.compose.material3 dependency
to your build.gradle files.
To illustrate how to adopt Material Design 3 and Material You, we’ll be using Jetchat.
Jetchat is a sample chat app built with Jetpack Compose,
and currently uses Theming and Components from Material Design 2.
We’ll be implementing this beautiful update to Jetchat,
provided by our designer, using the Compose Material 3 library.
It includes a broader range of tonal colors, fresh updates to Components,
and even incorporates dynamic color to make it more personalized.
Let's start with Material Theming.
The existing MaterialTheme composable is an implementation of Material Design 2.
It allows for application-wide theming of Material 2 components by adjusting colors,
typography, and shape systems.
We’ve introduced a new version of MaterialTheme for Material Design 3.
Material 3 components can be themed
by adjusting colorScheme and typography systems,
with updates to Dhapes coming soon.
Firstly, let's take a look at color schemes.
Material Design 3 separate colors into named color slots,
such as Primary, Background, and Error, which are used by Material 3 components.
Together, these slots form a color scheme.
Some of the slots remain from Material Design 2,
while others have been newly introduced to expand the overall palette.
They all feature beautiful, new default baseline colors
for both light and dark themes.
These colors are drawn from a set of tonal palettes.
For example, let’s take a look at the primary color slots.
The color values used by the slots
come from the different tones in the primary tonal palette,
selected for light and dark themes to meet accessibility requirements.
Compose models this with a new ColorScheme class.
Its parameters are named after the slots in the Material Design 3 color scheme.
Use the lightColorScheme function to create an instance
of ColorScheme with light baseline values,
overriding the defaults with custom colors, or use darkColorScheme
for dark baseline default values.
Use the isSystemInDarkTheme utility function to switch between light & dark color schemes,
depending on the system setting.
Pass the colorScheme as a parameter to MaterialTheme.
To learn more about custom color schemes, dynamic color,
and new tools for your designer and developer workflows,
check out the session “Material You: Applying Dynamic Color and Your Brand.”
Now let’s take a look at the Jetchat color scheme.
Jetchat’s color scheme was generated using the new Material Theme Builder tool.
We used Jetchat’s blue and yellow brand colors
as the primary, secondary, and tertiary source colors.
The resulting Material 3 color scheme fits the Jetchat brand,
and we get colors for both light and dark themes.
These branded colors are drawn from a custom set of tonal palettes,
generated by the Material Theme Builder tool.
For example, here’s the primary blue Jetchat tonal palette
and the matching primary slots from the color scheme.
To implement the Jetchat color scheme,
start by declaring these colors with the Color class.
The Material Theme Builder tool can also export this generated code for you.
Next, declare a light Jetchat color scheme using the relevant color values
and a dark Jetchat color scheme.
We’ve created a new composable function for our Jetchat theme.
It accepts a parameter for dark theme, as well as a slot for app content.
Use the dark theme parameter
to switch between the light and dark Jetchat color schemes.
Pass the colorScheme value and the content to the inner MaterialTheme composable.
This allows us to wrap our Jetchat content and provide theming values to our app.
Let’s take a look at the Jetchat conversation screen.
Parts of the UI use different color slots from our color scheme.
For example, the message avatar uses either a primary or tertiary border,
depending on the user.
It accesses color theming values with the MaterialTheme.colorScheme notation.
Next, let's take a look at dynamic color.
Dynamic color is a key part of Material You in which an algorithm derives custom colors
from a user’s wallpaper to be applied to the apps and system UI.
This is used as a starting point to generate a complete light and dark color scheme.
Dynamic color is available on Android 12 and above.
To implement a dynamic ColorScheme in Compose,
start by checking the build version SDK.
If dynamic color is available, we can set up a dynamic ColorScheme.
If not, we can fall back to using a light or dark color scheme as before.
Use the dynamicLightColorScheme function to create an instance of ColorScheme
with light dynamic values, or for dark dynamic values, use dynamicDarkColorScheme.
Pass in the context so that dynamic color resources
can be fetched from the Android system.
Let’s adapt the Jetchat color scheme for dynamic color.
At the moment, Jetchat uses the branded blue color scheme at all times.
However, we’d like to add support for dynamic color schemes
based on the wallpaper, adapting to the user’s personalization.
In this case, tonal palettes are internally generated from colors in the wallpaper.
A dynamic color scheme is derived from these tonal palettes,
and we get colors for both light and dark themes.
To implement this in Jetchat, let’s start by updating our theme,
by adding a new parameter for dynamic color.
Use the dynamic color parameter to set up a dynamic color scheme,
or fall back to the branded blue color scheme if it’s not available.
As before, pass the colorScheme value
and the contents to the inner MaterialTheme composable.
The Jetchat UI now automatically adapts to the user’s wallpaper on Android 12 and above,
giving us a beautiful, branded experience for both light and dark themes.
Now that we’ve covered color schemes, let’s take a look at typography.
Material Design 3 has a new type scale,
including text styles that have been adapted from Material Design 2.
The naming and grouping have been simplified to:
display, headline, title, body, and label,
with large, medium, and small sizes for each.
Compose models this with a new Typography class.
Its parameters are named after the styles in the Material Design 3 type scale.
Create an instance of Typography with Roboto baseline values,
overriding the defaults with custom TextStyles.
Pass the typography as a parameter to MaterialTheme.
Now let’s take a look at Jetchat’s typography.
The designer has given us a new branded type scale
using custom fonts Montserrat and Karla.
Start by declaring these fonts with the FontFamily class.
These will hold instances of the Font class,
which can be constructed with a font resource ID and a weight.
Declare the Jetchat type scale using the Typography class,
and override each of the text styles using the TextStyle class, our fonts,
and other typography values, like font size and weight.
Pass the typography as a parameter to MaterialTheme.
Let’s take a look at the Jetchat conversation screen.
Parts of the UI use different text styles from our Jetchat type scale.
For example, the message, author, and timestamp
use the titleMedium and labelSmall styles.
They access type theming values with the MaterialTheme.typography notation.
Now that we’ve covered Theming in Material 3,
let’s take a look at another update to a key aspect of Material Design: elevation.
Broadly speaking, elevation has changed
from using shadows in Material 2 to tonal color overlays in Material 3.
This is a new way to distinguish containers and surfaces from each other.
Increasing tonal elevation uses a more prominent tone.
Elevation overlays were a part of dark theme in Material 2,
which have also changed to tonal color overlays in Material 3.
The existing Surface composable is an implementation
of the Material Design 2 elevation system.
It accepts an elevation parameter
and handles rendering shadows and overlays in dark theme.
We’ve introduced a new version of Surface for Material Design 3.
It accepts a tonalElevation parameter
and handles rendering tonal color overlays in both light and dark theme.
Surfaces are the backing composable behind most Material components,
so let’s take a look at the updates introduced in Compose Material 3.
Material 3 includes a variety of updates to components like buttons, app bars,
dialogs, FABs, and navigation components.
These updates make use of the new Material 3 Theming values
and include fresh new updates to each component specification.
For example, let’s take a look at BottomNavigation in Material 2.
It aligns with the Material Design 2 specification
and accepts parameters like backgroundColor and elevation.
In Material 3, the component has been renamed to NavigationBar.
It aligns with the Material Design 3 specification
and the parameters have changed to containerColor and tonalElevation
to more accurately reflect their purpose.
There are a variety of updates to components in Compose Material 3.
To get a full overview of all the components and how to implement them,
we’ve updated the Compose Material Catalog app with a new Material 3 section.
Check out the source code on AOSP and download the app on Google Play.
Let’s take a look at one of Jetchat’s components.
On the profile screen, we have an extended FAB to compose a message.
This has been updated from the Material 2 to the Material 3 version.
Here is a simplified implementation in Material 2,
showing an ExtendedFloatingActionButton composable, inner Icon and Text composables,
and a custom primary background color.
Here’s what we did to update it for Material 3.
The imports for the composables have changed to Material 3.
We’re using the renamed containerColor parameter
and the tertiary color from our Material 3 color scheme instead.
Some aspects of Material You come from the new Android 12 visual style & system UI.
Two key areas where there changes are ripple and overscroll.
Ripple now uses a subtle sparkle to illuminate surfaces when pressed.
Overscroll now uses a stretch effect at the edge of scrolling containers.
No additional work is required to implement these changes.
Stretch overscroll is on by default in scrolling container composables
in Compose Foundation 1.1 and above.
Sparkle ripple is available on Android 12 for all Material Components.
Interoperability with Android views
is an important part of developing apps with Compose,
and we’ve made some updates to support this for Material 3.
MDC-Android Compose Theme Adapter
is a library that enables reuse of Material Components
for Android XML themes for theming in Jetpack Compose.
The existing MdcTheme composable is compatible with Material 2 XML themes.
We’ve introduced a new Mdc3Theme composable,
which is compatible with Material 3 XML themes.
It’s a great time to try out Compose Material 3 in your Android apps,
and we’ve prepared a collection of resources to assist you on your journey.
There’s a new API reference documentation for Compose Material 3
and a new Empty Compose Activity template
in Android Studio featuring Material 3 updates.
There’s also updates to the Theming in Compose guide, and as we’ve seen,
the Jetchat sample and Compose Material Catalog apps
and the MDC-Android Compose Theme Adapter interoperability library.
Hope you enjoyed it. Thanks, and take care.