MaterialYou — Dynamic Colors With JetPack Compose

How to use dynamic colors in Android apps

Screenshot from the sample app, check out here

Hey Android Developers, with the release of Material You on Android 12 and above the color schemes on the app got really exciting. A very personalized approach to showing the appearance of the app.

Based on the device’s wallpaper, an algorithm extracts colors from the wallpaper that is applied to the System UI and the applications too. Yes! the custom colors from the wallpaper can be applied to the apps dynamically.

In this article, we’ll see how dynamic colors work and how you can implement them in your apps

How Dynamic Colors Work?

Material You’s algorithm extracts colors from the user's wallpaper and assigned a type that determines how it relates to a color scheme. These color values are then translated into luminance-based tonal palettes, generating five color ranges with tones from light to dark.

From the five tonal ranges, specific tones based on the luminance levels are then slotted into predefined roles that form a scheme.

Color Palettes in a MaterialYou Theme

The screenshot is taken from Material Theme Builder

Try out the live demo of dynamic color or generate color palettes from an image here

With that said, how can we implement it in our apps?

Implementing Dynamic Colors

Like always, let's start with the required dependencies

// Required minimum version: 1.5.0
implementation 'com.google.android.material:material:1.5.0'
// For use of Material3 in Compose
implementation 'androidx.compose.material3:material3:1.0.0-alpha05'

Note: At the time of writing the compose.material3:material3 is still in alpha, there could be breaking changes. Use it at your own risk.

Let’s define a fallback theme to handle devices running Android 11 and lower, or the hardware doesn’t yet support the Material You

Define Light/Dark Theme Palette

private val LightThemeColors = lightColorScheme(
    primary = md_theme_light_primary, // and 20+ more color schemes
)
private val DarkThemeColors = lightColorScheme(
    primary = md_theme_light_primary, // and 20+ more color schemes
)

Let’s now define a composable App Theme

Make sure you’re referring to the import:

import androidx.compose.material3.*

And not:

import androidx.compose.material.*

All set, what now?

Use the AppTheme that we just created:

setContent {
    AppTheme {
        Surface(
            modifier = Modifier.fillMaxSize()
        ) {
            MyAppScreen()
        }
    }
}

Now make use of MaterialTheme.colorScheme to set colors to your UI

Scaffold(
    topBar = {
        CustomTopBar()
    }, 
    backgroundColor = MaterialTheme.colorScheme.surface
)

Here’s how it comes out:

Screenshot 1 from the sample app, check out here

Screenshot 2 from the sample app, check out here

That’s all! I hope this article helped you on how to implement a dynamic theme in your app.

Github Repository: https://github.com/praveen-gm/MaterialYou-Compose