Blog Infos
Author
Published
Topics
,
Published

During I/O 2021, Google announced the latest stage for Material Design, Material You (or M3). This new design coming first to Android 12 is focused on customization, responsiveness and accessibility, making devices feel even more personal.

Since the initial announcement, Google released more and more content, tutorials and libraries to help the developers embrace Material You and create beautiful and expressive apps. In this article, we will take a look at some key concepts and how to learn more about this new design.

The dynamic color is a user-generated color scheme which integrates with Android system and apps implementing the Material You color system. This color is generated from the user wallpaper, creating a beautiful and unique color palette.

Here is an example of a color palette generates by a red floral wallpaper. The scheme also generates the colors for both light and dark themes.

Dynamic Color by Google

And now you can make your own application use this user-generated color palette! With the addition of the new dynamicLightColorScheme and dynamicDarkColorScheme APIs, adding the support in your app is as easy as adding few lines of code.

val dynamicColor = isDynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colorScheme = when {
dynamicColor && isDarkTheme -> dynamicDarkColorScheme(LocalContext.current)
dynamicColor && !isDarkTheme -> dynamicLightColorScheme(LocalContext.current)
isDarkTheme -> MyAppDarkColorScheme
else -> MyAppLightColorScheme
}
view raw Theme.kt hosted with ❤ by GitHub

At the moment, the dynamic color support is available starting in Android 12 and in some selected devices.

The Material Theme Builder is a tool designed to help us visualize and create custom themes following Material You’s guidelines. It is possible to generate themes both from a wallpaper and from accent or brand colors.

This tools is available as a Figma Plugin and on the Web. In addition to providing a better visualization, the Material Theme Builder allow us to export the theming code to multiple formats: Android Views (XML), Jetpack Compose (Kotlin) and Design System Package (DSP).

Material Theme Builder by Google

When migrating from Material Design 2 to M3, you will notice that some color and typography naming were updated. The new naming has a stronger focus on creating a adaptive type scale, express style and communicate meaning. So type scales like “H1”, “Body1” comes out and “Headline Large”, “Body Medium” comes in.

The color names also underwent an update and have been given more meaningful names, facilitating the usage and hand-off between developers and designers. And thanks to the Material 3 Design Kit and the Material Theme Builder it is easy to preview and understand the changes.

Light Theme Color Selection by Google

Job Offers

Job Offers


    Android Build Engineer

    Pinterest
    San Francisco, CA | Seattle, WA
    • Full Time
    apply now

    Android Developer

    Small and Modern GmbH
    Hamburg, Remote (Germany)
    • Full Time
    apply now

    Senior Android Developer (Remote)

    Komoot
    Europe
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Jobs

Google also updated the Material Components for Android library in order to reflect the changes on Material You. The current version supporting M3 is not stable yet (minimum 1.5.0-alpha or later) but the library already supports the key components, themes, layouts and more. To make our life easier, they even released a migration guide to make the transition smoother.

And if you think that Material You is available for Jetpack Compose, you’re right. A brand new Compose Material 3 library was also released to give the refreshed look and feel in our Compose apps. The library is currently in alpha, but a lot is going on to bring all the components to M3.

One of the pleasant surprises from Android Dev Summit 2021 is the Material Design to Code. The idea is that the designer creates the UI components in Figma and provides a shareable link for the developers. This link can be imported on Android Studio and the design is automatically created in Jetpack Compose code! 🤯

The UI components can also be updated from Figma side and reflect in Android Studio with a click of a button, integrating with the version control system. No more headaches and misunderstanding between designers and developers!

This feature is currently in Preview and if you are interested to join the early access program you need to sign up using this form.

Design to code by Google

It’s a exciting moment for Material Design and what we can achieve to create personal and beautiful applications. Material You, the new libraries and tools are refreshing and Google is providing support and listening to the community, which makes me feel that we are building a great thing together.

I started to update my open-source project from Material Design 2 to Material You. This is currently a on-going pull request once some of the components that I use are not yet ported to M3. If you want to see how simple is to use dynamic color, update the existing components and integrate the theme created in Material Theme Builder, this PR is a good start. 😊

Here is the currently implementation of the pull request above with Material You components and dynamic color:

Alkaa with dynamic color

Thanks to Bruno Kenji Tiba.

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
For this tutorial, we will be styling an App with Material Theme.The application basically…
READ MORE
blog

NavigationRailView MaterialDesign 1.4.0 Stable ?

In this article, We will learn about NavigationRailView finally which hits the stable channel…
READ MORE
blog

Android 12 review for developers

The Google I/O’21 conference took place, and we learned absolutely everything about the new…
READ MORE
blog

From Nothing to Material Transitions

Animations rarely change the core functionally of an app but you can’t deny they…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu