Shulou(Shulou.com)11/24 Report--

In 2014, Google released Material Design (MD), which became the unified UI design language for Google products. MD has had two major upgrades to date, Material Theming (Material Design2, M2) released in 2018 and Material You (Material Design3, M3) released in 2021. This article will take you to detail the upgrades and changes of M3 relative to M2.

The biggest feature of the color personalization M3 is the emphasis on personalization, just like the name "You". One example is Dynamic Color. Devices that support M3 (such as Pixel series phones equipped with Android12) can dynamically change the theme of the App or Widget according to the wallpaper color.

Experience wallpaper-based dynamic color effects with tools provided by Google: material-foundation.github.io/material-theme-builder/#/dynamic

Dynamic color matching is based on ColorScheme, which is extracted and updated from the current wallpaper by algorithm. We can observe this change and apply it automatically in our application through duyamicColorScheme. Here's an example of Composite-M3 code:

val dynamic = Build.VERSION.SOK_INT = Build.VERSION_CODES.Sval colorScheme = if (dynamic) { val context = LocalContext.current //Create ColorScheme instances with light dynamic values using the dynamicLightColorScheme function //or create instances with dark dynamic values using dynamicDarkColorScheme //Pass Context to get dynamic color resources from Android system if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)} else { //Use lightColorScheme or darkColorScheme} What is ColorScheme? We'll see it later in the introduction to color systems.

Multi-screen size adaptation With the increase of various tablet and folding screen devices, more and more applications need to consider the effect of running at multiple screen size, and can dynamically respond to changes in screen size.

An important design principle of M3 is that UI adapts to different screen size and gives a more reasonable layout. M3 gives a lot of details about cross-screen design, such as how to place menu bars, how to display Detail-List on the same screen, and even transition animation of layout switching, etc., but the basis of all this is to give a set of standards for screen types. Any screen size can be divided into Compact / Medium / Expanded.

Thus all specifications are categorized into these three types and do not need to be defined separately for different screen specific size. Take the code of Composite-M3 as an example, when the screen size changes, the layout reorganization is triggered, and the latest windowSizeClass is obtained in the reorganization to make the layout targeted:

enum class WindowSizeClass { Compact, Medium, Expanded }@Composablefun MyApp(windowSizeClass: WindowSizeClass) { // Select a navigation element based on window size. when (windowSizeClass) { WindowSizeClass.Compact - { } WindowSizeClass.Medium - { } WindowSizeClass.Expanded - { } MD has three specifications, Color, Shape, and Typography, which fall into the code as constants defined in MateriaTheme for reference in our projects. Let's look at the changes in M3 from these three aspects.

Color ColorM3's color system is consistent with M2's overall idea, both use color slots (ColorRule) to classify color scenes in the application, but there are adjustments and additions in the definition of color slots. There are 25 color slots defined in M3, as shown in the table below. Many color slots inherited from M2, and the green box part is the new content added by M3.

In the color slot table, vertical classification according to the use of scenes and importance, just like a performance has a protagonist and supporting role, the main and secondary works are more beautiful. According to the scene, it can be classified into three categories:

AccentColor: Primar, Secondary, Tertiary, these are the actors on stage, followed by the lead, second, and third actors. We can assign these colors according to the importance of UI components, with Primary being used for those components with the most important functions or the largest area.

NeutralColor: Includes Background and Surface, which are environments and sets in the Stage that can be used as background colors for components to complement the lead actor's show.

AdditionalColors: These are special items that appear only in special situations, such as Error.

The color bin table is horizontally oriented, and each color group consists of four shades that can be used together within a component.

Take the Primary color trough as an example:

Primary & OnPrimary: inherited from M2. Primary is the base color for this group of colors, OnPrimary is used to contrast content displayed above Primary. 1 and 2 above.

Primary Container & OnPrimary Container: New definitions for M3, lighter colors, can be used for components with lower importance than Primary&OnPrimary, as shown in Figures 3 and 4 above. It seems to be similar to the use of Secondary, which is selected according to the importance of components. The difference is that they are the same color system as Primary, which is suitable for forming larger components with Primary and is more coordinated.

The same group of different shades are taken from the color palette, as follows is the Primary palette, the palette consists of 13 colors, the larger the number, the lighter the color, and vice versa. Light/Dark themes are also selected from the palette

M3 uses ColorScheme to define a set of color slot schemes, taking Composite-M3 code as an example:

class ColorScheme( primary: Color, onPrimary: Color, Set theme color by setting ColorScheme in Theme

import androidx.compose.material3.MaterialTheme @Composablefun MaterialTheme ( colorScheme: ColorScheme, typography: Typography, //Update Shape feature coming soon content: @Composable () -> Unit) Shape Shape, first of all, the classification method of Shape M3 and M2 has changed

M2M3

M2 is classified according to the size of the component itself: Small / Medium / Large, while M3 is divided into seven categories for the radian of the rounded corners of the component: from None to Full, each component has more expressions, making the UI more expressive.

In addition to color, text Typography is also one of the specifications of MD. In terms of font definition, M2 has 6 kinds of headings (Headline 1~6), 2 kinds of subtitles (Subtitle 1~2), 2 kinds of body headings (Body 1~2), buttons, overlines and other style fonts. M3 is relatively more regular in classification, no longer using numerical classification, but according to Small / Medium / Large classification

M2M3

Above, color, shape and text are the three basic specifications of MD. The default components of the system form a unique visual style by applying these specifications. The UI component of M3 presents two characteristics visually as a whole, one is more rounded, and the other is larger, which makes the click area more obvious in the current large-screen popular devices. Let's take a look at the specific changes in the design of the various basic components:

FAB floating button

Shape changes from round to rounded rectangle

A new large size FAB of Large (96dp) is added. By default, M2 only has Default (56dp) and Mini (40dp) two size

Default background color changed from Primary to Primary Container

Extended Fab height is aligned with Fab height, visual unity, M2 height slightly different,

Button button

Basic shape changed from rounded rectangle to semicircle

Text buttons are no longer all caps but case-sensitive

Increase height (36dp > 45dp)

Chip Label

Semicircles become rounded rectangles (as if M3 and M2 had exchanged rounded corners on component shapes...)

Adjustment of functional categories, Actioin class Chip is split into Assist and Suggestion types

By default, there is no shadow left (elevation = 0). M3 components cancel many shadow elements by deepening the color contrast of the border, and weaken the imitation style as a whole.

TopAppBar Title Bar

Shadow is canceled by default, and shadows increase when scrolling (Elevation = 2)

Height increases, font size increases

In M3, the definition of Primary Variant in M2 was deleted, which was originally used in StatusBar. The color is darker than Primary. M2 StatusBar is also Primary, creating an immersive title bar.

Switch Switch

Greater area, increased height

Cancel shadow, dummy becomes flat

Add recognizable graphics such as checkmarks, which is more friendly to color blindness.

NavigationBar

First, the name changes, M2 is called Bottom Navigation, M3 is called NavigationBar

Cancels shadows, increases height

M2 indicates the selected state by the transparency of the color, M3 adds Outline

Dialog

Enlarged font for Title

Increased Padding

Greater radian of rounded corners

In addition to the above components, the styles of other components have not changed much, most of which are to cancel shadows and increase areas, so I will not repeat them.

Finally, through the introduction of this article, I believe that everyone has a deep understanding of the style of M3, although domestic Android applications in order to balance the unity of iOS style, rarely follow MD design specifications, but if you are a personal developer, MD will help you develop more professional, beautiful products.

This article comes from Weixin Official Accounts: AndroidPub (ID: gh_e312d1adb6ec), author: fundroid

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.