Material3 Color System Basics for Android Developers

Published in

ProAndroidDev

4 min read4 days ago

Material3 is the newest iteration of Material Design, with dynamic theming, revised components and more… however, it can also be overwhelming with its over 200 different color variations and tens of pages of documentation.

The good thing is that in reality, it’s not all that complex and it can make developers’ lives much easier. And by easier, I mean the following:

Automatic theming of all Material3 components
Dark and light color schemes
Correct colors for the various component states that you never thought of, like “hovered”
Proper contrasts between colors for accessibility and UX
A cleaner codebase!
And more…

In this article, I’ll explain how the Material3 Color System works and why you should implement it in your Android project.

Understanding Material3 color roles

In order to understand how colors are applied in your app, let’s recap a bit on how a color scheme is structured.

The Material3 color scheme consists of three high level “color roles”: Primary, Secondary and Tertiary. These colors are applied on components based on their importance: a FAB or a “login” button would use a Primary color.

The Primary color might be your brand’s main color and thus used for prominent components like primary buttons. The Secondary colors are used for accents, whereas the Tertiary ones are less common.

Material color roles diagram. Source: https://m3.material.io/styles/color/roles

The variations, like “On Primary” have rules on how they should be applied: if your “login” button uses the Primary color, then the text on it would use “On Primary”. Following these rules ensures that your app is readable and accessible.

Button with a background of “Primary” and text with “On Primary”

Why is this important to know? Well, each Component and each state has its own colors, as documented in the Material3 docs. A simple button has 7 states, each with various colors. You shouldn’t have to worry about memorizing each one!

The various states and specs for a Filled Button. Source: Material3 Button-Filled spec

Creating a theme

So, how about declaring those +200 colors? Well, the good news here is that it happens pretty much automatically. You definitely don’t want to create a color scheme from scratch.

There are two options: use the Material Theme Builder Figma plugin or use the online Material Theme Builder.

Colors generated by the Material Theme Builder

Both of the builders work similarly:

Choose your source color, all the other colors will be automatically derived from it
Export the generated .kt files
Place the files in theui.theme package in your Compose project
Rename AppTheme if you like

And that’s it! Now you have a full custom Material3 Color System applied in your project.

But how does it work?

Behind the scenes

The Theme.kt file you exported contains the following code snippet:

Here, the pre-defined colorScheme is applied to the MaterialTheme composable. When you wrap Composables in your Theme, those composables gain access to the colorScheme. This is for example, how you apply theming to your @Previews.

In the above code snippet, the AppTheme provides the defined colorScheme to the Button via CompositionLocal. This results in a fully themed Button, supporting both Light and Dark modes, without explicitly defining colors.

Note that both the backgrounds as well as the text colors are different.

If you look at the Material3 Button’s source, you’ll see that the default value for colors is ButtonDefaults.buttonColors() . The buttonColors() function gets those colors from your MaterialTheme:

@Composable fun buttonColors() = MaterialTheme.colorScheme.defaultButtonColors

Where do the colors apply?

As you might guess, the colors are applied to all Material3 Components, and their states, from the simple Button to complex ones like the TimePicker.

Theming

As seen above, you’ll get colors for both dark and light themes, out of the box.

The following piece of code thus results in a fully themed TimePicker component, for both Dark and Light themes.

Resulting in the following Previews

TimePicker in both light and dark themes

States

And the various states? Yep, the colors are also automatically applied based on composable states.

The above change in color for both the Button background and the label are directly derived from the Button’s enabled property, as seen from the code snippet below:

Summary

Implementing Material3 Color System can seem intimidating, but by using the Material Theme Builder and Material3 Compose components, you’ll find that the theming is far more simple and straightforward than without using them.

And as all developers like, you’ll end up with a cleaned codebase and refined color scheme throughout your app.