mobile android

The evolution of Material Design. From Material Design to Material You.

Written by: Patryk Kubiak, Android Developer

Introduction to Material Design

During the journey of every Android Developer, we have observed various Material Design language rules. We started with the first guidelines of Material Design in 2014. Then we acknowledged the set of updates to the language in Material 2 in 2018. Finally, we have seen the major changes in the newest version of Material Design called Material You (Material 3) in 2021. I will introduce these changes through the years from the Android Developer’s perspective and describe the most valuable changes and new things in Material 3. Let’s begin!

We will go through the following issues:

Versioning of Material Design

Material design is a design language (scheme or style that guides the product design). There were 3 major versions of this language.

Material 1

Google introduced the first version of Google Material Design in 2014. The primary purpose of creating this language was to combine principles of good design with technical and scientific innovation. It allowed the unifying design of Google applications. What else, developers can exclude basic components with Google’s material components API.

Source: https://en.wikipedia.org/wiki/Material_Design

Material 2

The next step was Material 2 (Material Theme), introduced in 2018 as an update of Material 1. The language went through some cosmetic changes to highlight the components even more.

The main differences between Material 1 and Material 2 are:

  • new font — Google Sans,
  •  more white spaces,
  •  rounded corners,
  •  colorful icons, and so on.

The video below is a great example showing the migration from Material 1 to Material 2.

Source: ‘Google Material Design 2.0’, youtube.com, uploaded by mobileCTRL, July 24, 2018

Material 3

Material 3, also known as Material You, is the newest version of Material Design. The two previous versions were strictly standardized. Otherwise, Material 3 focuses on user-oriented personalization. The newest version of the language introduced many updates. Some of them are listed below: 

  • dynamic colors based on the user’s wallpaper,
  • different shapes,
  • new typography,
  • changed components (for example bigger buttons)
Source: ‘Android 12 Official Release – What We Waited For!’, youtube.com, uploaded by In Depth Tech Reviews, October 20, 2021

I believe that James Williams explains very well the changes between Material 2 and Material 3 in the article ‘Migrating to Material Design 3′ (source: Material Design Blog, uploaded at October 27, 2021).

Let’s dig deeper into the major features of Material 3.

Characteristics of Material 3

Dynamic colors

Material You focuses on a variety of different colors and shapes. The colors are fully customizable. On the contrary, with material 2, more apps look similar due to strict standards.

Source: ‘Material Design’, material.io, link: https://m3.material.io/foundations/customization, January, 2023

The dynamic colors allow the app to match the system color preferences. As you can see in the example above, the colors in the app change every time users change the wallpaper.

Shapes

Source: ‘Material Design’, material.io, link: https://m3.material.io/components/widgets, January, 2023

Material You is based on a variety of shapes. You can distinguish different ones used on one screen and even the 7-level shape scale based on the roundedness of the component corners.

Source: ‘Material Design’, material.io, link: https://m3.material.io/styles/shape/overview, January, 2023

Material Icons

Also, Google has updated the icons to Material Icons, which can have slightly different versions. The symbols are easily customizable, and an updated version is available on the Google icon’s page.

Source: ‘Material Design’, material.io, 1. Outlined 2. Rounded 3. Sharp; link: https://m3.material.io/styles/icons/overview, January, 2023
Material Icons 1. Outlined 2. Rounded 3. Sharp;

Topography

The Material 3 typography went through simplification. As a result, from the 6 Headline variations, currently (Jan 2022), we have fewer variants for each classification (Small, Medium, Large).

Source: ‘Material Design’, material.io, link: https://material.io/blog/migrating-material-3, January, 2023

Design material components: Material 3

Buttons

Now, the buttons are rounded. Also, they are a bit higher than in Material 2.

Source: ‘Material Design’, material.io, link: https://m3.material.io/components/buttons/overview, January 2023

Floating Action Buttons

The Action Buttons in Android can be classified as Floating Action Buttons (FAB) or Extended Floating Action Buttons. FAB is a circular button that triggers the primary action in the UI apps. Extended Floating Action Button is the class with the Material Components library in Android. Concluding, it looks more rectangular now.

Source: ‘Material Design’, material.io, link: https://m3.material.io/components/extended-fab/overview, January, 2023

Switches

In Material 3, thumbs are not exceeding the switch track. Even more, there is a space between the thumb and the track.

Source: https://m3.material.io/components/switch/overview

Top App Bar

The Top App Bar and the status bar (displaying the battery and the network icons) now have the same color. Also, there is less contrast between the app bar and the content below. 

Source: ‘Material Design’, material.io, https://m3.material.io/components/top-app-bar/overview, January, 2023

Bottom App Bar

The users are used to the Floating Action Button at the edge of the Bottom App Bar. However, the new Material expands the bar vertically and keeps the button inside.

Source: ‘Material Design’, material.io, https://m3.material.io/components/bottom-app-bar/overview, January 2023

Navigation bars

The new navigation bar has a more distinguishable selected element by changing the icon to a fill version, bolding the label, and adding a shape around the icon in a different color.

Source: ‘Material Design’, material.io, https://m3.material.io/components/navigation-bar/overview, January 2023

Date picker

The main difference in the date picker is color theming and the component borders which are rounded and without a drop shadow.

Source: ‘Material Design’, material.io, https://m3.material.io/components/date-pickers/overview, January 2023

Time picker

Also, the time picker component is similar to the date picker component. I recommend a more detailed article about the implementation of the time picker component.

Check the article "MaterialTimePicker as an upgrade of the TimePickerDialog" (Patryk Kubiak, Feb 14, 2021).
Source: ‘Material Design’, material.io, https://m3.material.io/components/time-pickers/overview, January 2023

Design of other components

Other components which have the comparison between Material 2 and Material 3:

And here you can find a full list of the Material 3 components.

Conclusion

From its premiere in 2014, Material Design language went through dozen changes. After a while, there was an update to Material 2. That wasn’t a big deal. However, the major changes came with Material 3. The first Android system with Material 3 released in late 2021.

Today is the beginning of 2023, and I think the next 2–3 years are the time for validating and uploading improvements to Material 3.

Therefore, the upcoming versions of Android OS and different Google UI libraries for programmers will need some changes.

Let’s observe what Google will develop in the coming years!