Material Design 3 in Android. Consistency from design to code.

Exploration of the Android user interface, focusing on integrating Material Design.

This year, with the aim of improving my programming skills, I have started a scholarship at Telefónica. In addition to participating in ideation, design, and development sessions for prototypes in the Discovery area, I am dedicating time to explore tools and resources that I hadn’t previously used.

In this article I summarize my exploration of the Android user interface, focusing on integrating Material Design.

Material Design

Material Design is an open-source design system launched by Google in 2014. It is not only a kit of components but also includes detailed guidelines, styles and a thousand of useful resources.

Material Design 3, the latest version of this design system, brings a new level of personalization, accesibility and adaptability. It is also known as Material You due to its focus on bringing a personalized experience for each user while ensuring consistency.

Here is an analysis of some of the most important Material Design 3 resources for Android designers and developers.

Components

By using the collection of Material Design Components you can build your app interface faster using predesigned components. Styles will be assigned to components by default followic a careful logic. This ensures starting from a completely consistent foundation.

Collection of components provided by Material Design 3 design system

For developers Material Design has an easy integration with Jetpack Compose, the latest toolkit for building native UI in Android.

There is also a official file of Material Design components for Figma.

Theming

In this section there is an analysis of color paletters, typography and shape that is the core of theming an app.

Color

The foundation of the color scheme resides on an algorithm that can generate full palettes from one color.

Colors are organized in pairs (ex. primary / onPrimary) with an accessible minimum 3:1 contrast. They are named depending on their use and palette (dark, light) and they will be mapped to Material components.

This color assignment to components is dinamic. If a surface has primaryContainer color applied, the elements inside it will automatically have a background of onPrimaryContainer . In other words, the assignement of colors depends not only on the specific element but also on its location, making it a much more detailed and useful logic.

Example of pair of colors generated by theme builder

It is recomended to generate the palette for your project by using theme-buider. There are two tabs in the website:

• Dinamic: it is a new color mode that let users have a personalized color experience. In this section of theme-builder you can understand how it works better. If you enable dinamic color on your app, your Material Design palette will be aligned tonally with devices wallpaper when active.
• Custom: to create your own light and dark palettes by specifying 1 or more colors.

Developers can export the Jetpack Compose files generated by theme builder and add them directly to their projects.

// Color.kt
val md_theme_light_primary = Color(0xFF006A64)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFF71F7EC)
val md_theme_light_onPrimaryContainer = Color(0xFF00201E)
...
val md_theme_dark_primary = Color(0xFF50DBD0)
val md_theme_dark_onPrimary = Color(0xFF003734)
val md_theme_dark_primaryContainer = Color(0xFF00504B)
val md_theme_dark_onPrimaryContainer = Color(0xFF71F7EC)
...

In Figma, open the Material Theme Builder plugin to use and edit your color palettes. When designing a new product and defining colors, it is highly useful to establish various palettes and preview how your app looks with them just in seconds.

If your company needs to use some specific colors you can always modify, add new ones or create the palette from scratch. Be careful if you edit or create a palette manually because accesibility and correct default assignment to components is now on you. Check the color roles documentation for a better result.

Tipography

Material Design 3 defines a type scale divided into:

• 5 categories: display, headline, title, body, and label.
• 3 sizes in each category: small, medium and large.

Each text style comes with default values, and they will be assigned to each component automatically following a logical approach.

Example of a Dialog component and its text styles assigned by default

In Android Studio you can always override the text styles in your Type.kt file or assign a different one to a specific element manually in your components. You are also not limited to these 15 type styles and you can create other ones out of the type scale if necessary.

// Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = AbrilFatface,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp
    )
    ...
)

If you are working in Figma with the Material 3 Design Kit, edit the local text styles at your convenience.

Check the documentation to understand the use of each text role. It represents a significant simplification, considering that many design systems tend to grow infinitely in terms of text styles, because usage is not well defined.

Shape

There are different sizes of shapes in the shape scale:

• Extra small, small, medium, large and extra large

As with typography, each shape size is assigned to different elements by default.

Example of a component and its shape style assigned by default

By editing these variables, you will see how your app’s look and feel changes completely. Here is an example of how you save values in Android Studio.

// Shape.kt
val Shapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(16.dp),
    large = RoundedCornerShape(32.dp)
)

If you are working in Figma with your Material 3 Design Kit, currently, there are no shape variables in the file. However, you can create them by adding local variables and assigning them to each component’s border radius.

Conclusion

Material Design 3 is bringing a strong base of consistency with its open-source design system. It provides resources that can make your team more efficient working around stablished guidelines and it is flexible enough to adapt it to your company or product.

Feel free to explore additional documentation and resources such as grids, animations, or icons in the official Material Design 3 documentation

If you are a developer, I recommend you to follow this official Android tutorial to start using themes in your projects.

Thanks to Pablo Gómez Guerrero