Material You: breaking down the updates in Material

In 2014, alongside the release of Android 5.0 Lollipop, Google showcased the concept of Material Design. Each element of the system is made of “material”, the idea of which was neatly described by Matias Duarte, “Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”

2018 has seen the second version of Material. This one had more options to make things custom:

• updated color scheme,
• updated guidelines on fonts,
• support of shapes (component shapes).

Thanks to that, we had more ways to express the Material identity — the visual brand interface — through standard components.

But Google didn’t stop there, and that’s why you’re reading this article right now. In 2021, Google I/O showcased the concept of Material You — a new version of Material under number 3. Unlike the previous update, this one really shows a lot of changes. The aim of the new concept is to make the user experience individualized.

Hi! I’m Timur Zadvornov, and I’m an Android developer at Surf. In this article you’ll find out about the following:

• The basics of the Material color scheme
• Updated color scheme
• Dynamic Color
• Updated UI components
• Other updates

But before that — an introduction: we’ll break down the basic structure of the Material color scheme. This will help you get a better hang of the updates in Material 3: what they mean and how to approach them.

Disclaimer: this article is about design rather than development and using the components in your code.

Want to stay on top of app development trends and know how Surf creates apps millions of people love?

Follow Surf on Twitter!

The basics of the Material color scheme

Material-palette is made up of six key colors:

• Primary
• Secondary
• Background
• Surface
• Error
• Outline

Primary and Secondary are the main accentuating colors of the app; brand colors, if you will. It’s all pretty clear. For example, the Primary color of YouTube is #ff0000 (red), and the color of Twitter is #1d9bf0 (blue).

Background and Surface are the colors of underlying surfaces serving as backgrounds for the content. Background is the background color of an app, while Surface is the color of component surfaces in an app. A perfect example is Card View. Card View has a standard Surface color.

Background and Surface seem like the same thing. But they’re not: they don’t really stand out in a light theme, but they’re quite visible in a dark one.

Let’s brush up on the basics of Material. How are the app components positioned with respect to each other? Material guidelines give a very detailed description, but we’re going to skim them real quick.

App components are positioned at different heights with respect to the Z axis (elevation). Light themes show elevation by means of shadows under components. Dark themes don’t work that way: you won’t be able to see a shadow. The beauty of the solution is its simplicity: the more elevated the content is along the Z axis, the closer it is to the light source (the screen surface) and the lighter it is.

And here’s when Surface color comes to the rescue! If you set the Surface color, your content will change automatically according to the elevation — no extra lines of code needed. The way elevation is mapped to brightness is pretty well-documented and is also illustrated in the animation below. This is a pretty confusing topic, so I’m looking forward to your questions about colors in the comments — let’s dispute :)

Error is the color of errors. I guess that’s pretty self-explanatory.

Outline is the color of outlines around particular components. A great example of that is Outlined Text Field.

Now, we’re done with the key colors. The only thing we have left is their variations — on-colors. On-colors are the colors that would look perfect on the “surface” filled with a primary or secondary color, surface, background, or error color.

A quick example straight away: a red Error color will obviously have a white OnError color because it reads well on a red background. Each color, except for Outline, has a matching on-color: Primary has an OnPrimary, Surface has an OnSurface, and so on.

Updated color scheme

Now that we’ve covered the basics of the Material color scheme, let’s move on to the updatestes.

The palette is now expanded with a Tertiary color and all of its variations. Tertiary is the third color we can use to enhance brand identity, alongside Primary and Secondary: some brands find the choice of two colors limiting.

We now have a new Surface color — SurfaceVariant (along with OnSurfaceVariant). It’s the second option for a surface color. You can use it as, say, a text color on surfaces or a color for dividers.

Another brand new thing in the Material palette is Container colors. Container colors are a new variation of colors used in containers with components in them. A striking example of that is the Floating Action Button. Starting with Material 3, the background color of this button is PrimaryContainer, while the color of its content is OnPrimaryContainer. Container variations also have doppelgangers — On-colors.

Dynamic Color

How is Google going to make devices more individualized with Material You? The answer is Dynamic Color — one of the key updates in Material 3!

Dynamic Color is a feature that derives a color palette from a user’s wallpaper and applies it across the apps in the system (the ones that accept Dynamic Color, of course).

How are the colors generated? The color palette is created by the new Monet Engine available in Android 12: it extracts a so-called seed color from the wallpaper and generates a color palette based on that.

The spectrum consists of thirteen tones, including black and white. A tonal value of 100 is equivalent to maximum lighting and results in the color white. A tonal value of 0 is a clear black. Every tonal value between 0 and 100 represents the amount of light that shines on the color.

Android generates five key colors:

• Accent1 (used for Primary),
• Accent2 (for Secondary),
• Accent3 (for Tertiary),
• Neutral1 (for Background and Surface),
• Neutral2 (for SurfaceVariant and Outline).

Plus, 13 shades of them. You can check out the resulting palette in an Easter egg widget on Android 12.

If we put all the data together, we’ve got ourselves a huge generated color palette and a Material color system. The picture below shows the color scheme of an app generated by as little as a single seed color.

You can also generate your own M3 palette with Material Theme Builder. In addition to that, you can download the resulting themes as XML and Jetpack Compose styles.

Updated UI components

Material 3 provides updated guidelines on UI components: buttons, chips, dialogs, cards, and the navigation panel. Сolor mapping of all components complies with Material 3 guidelines and accepts Dynamic Color. Let’s talk about each component in detail.

Buttons

All have been updated: regular buttons, FABs (floating action buttons), and Extended FABs.

What’s new in regular buttons:

• Completely rounded angles.
• Bigger size: standard height is now between 36dp and 40dp, icons inside buttons are 18dp.
• Text inside buttons has changed from all caps to sentence case.
• 3 new types of buttons: filled — with primary, secondary, tertiary or any other background; filled tonal — with container background) and elevated buttons — with shadows.

Here they are, left to right: Filled, Filled Tonal, Elevated, Outlined, Text.

What’s new in FABs:

• New shape: FABs are now rounded squares instead of circles.
• New type — Large FAB.
• Updated color palette for buttons: according to the guidelines, the background should now be a Container color (Primary, Secondary, or Tertiary), while the content on the button should be a corresponding On-Container color.

Small elevated FAB

Large FAB

Regular FAB

Large elevated FAB

What’s new in Extended FABs:

• New shape: Extended FAB are now rounded squares as well.
• Updated color scheme as with regular FABs.
• Updated sizes for text buttons: now it’s the same height as a regular FAB.

Chips

Chips are components that help users enter and filter information. What’s new:

• Updated shape. Now they all look the same: like rounded rectangles.
• Chips are grouped into 4 types: Assist, Filter, Input, and Suggestion.

Assist is for “smart” or automated actions, such as adding an event to your calendar. The closest visual analogy is a regular button.

Filter is a button that filters data.

Input is data previously entered by the user. A striking example of that is email address input, when data is transformed from a text field and into data on a chip.

Suggestion chips help narrow down user intentions by giving dynamic suggestions of possible user actions, for example, response suggestions in a messenger.

Dialogs

Dialog updates:

• Bigger content padding.
• Bigger radius for rounded angles.
• Updated fonts.
• An icon is added over the heading in standard dialogs.

On top of that, Google rolled out new guidelines on implementing full-screen dialogs. These could be used for data input on mobile screens. That being said, on tablets, it will be a regular dialog rather than a full-screen one.

Navigation

On Android, there have only been two ways to build a user-friendly interface all along: a side bar and a bottom bar. With Material 3 introduced, Android unified the way navigation bars are named and added a new type — Navigation Rail.

• Navigation Bar — formerly known as Bottom Navigation.
• Navigation Drawer — a side navigation panel. To view it, users need to swipe a finger from the left edge of the screen, or, if the screen is big, by anchoring it to the left edge.
• Navigation Rail — also a side navigation panel but a narrower one: just like a vertical Navigation Bar.

There aren’t as many updates for the navigation bars: the updated color scheme, the rounded edges, and several resized components.

The only thing I’d like to focus on is Navigation Rail. According to the guidelines, it should be used on big screens instead of the Navigation Bar which usually stretches to fill the entire width at the bottom of the screen and looks messy.

Other updates

The updates have also covered large screens. With Android 12L coming up, Google has revealed the guidelines on app design, adapted to various screen sizes: mobile, foldable, and large.

The update has covered a great number of components that we don’t need to bother discussing in detail. The cards, however, haven’t changed much. Apart from the color scheme, there’s little change:

• Not all cards are elevated now.
• They are grouped into 3 types: Elevated, Filled, and Outlined.

The same goes for toolbars: there are slight alterations in color scheme, text positioning on various types of toolbars, updated fonts, and no elevation.

Material You is the best thing that happened to Material

The third update of the Material concept is a pretty bulky one and has brought about a lot of new things to Android design in particular. In summary:

• There are a lot of new things in the Material palette (I hope you found my brief overview of the palette helpful).
• Dynamic Color is an exciting thing. What I like is that, starting with Android 13, all vendors will have to support this feature. I doubt that all third-party apps will start supporting dynamic colors anytime soon though.
• Updated components and their APIs for Material Design Components. The APIs for other platforms (Jetpack Compose, Flutter, Web) are undergoing updates as well.

Sadly, Material You is still a little crude. As of September 2022:

• Not all components are updated. Currently, Material You guidelines are only fully supported by Material Design Components — the old approach to Android development.
• First beta version of the Material 3 library came out for Jetpack Compose.
• Support for the new guidelines for Flutter is deep in development
• Support for the Web is on the roadmap.