In 2014, Google released Material Design (MD for short), which became a unified UI design language for Google's products. So far, MD has had two major upgrades, Material Theming (Material Design2, M2), which was released in 2018, and Material You (Material Design3, M3), which was newly released in 2021.
The biggest feature of M3 is the emphasis on personalization, just like the name "You". A concentrated expression is dynamic color matching (Dynamic Color). Devices that support M3 (such as Pixel series mobile phones equipped with Android12) can dynamically change the theme of the App or Widget according to the wallpaper color.
You can experience the dynamic color-matching effect based on wallpaper through the tools provided by Google.
Dynamic color matching is based on ColorScheme, the system extracts and updates ColorScheme from the current wallpaper through an algorithm. We can observe this change in our application through duyamicColorScheme and apply it automatically. Take the Compose-M3 code as an example:
What is ColorScheme? We'll see it later in the introduction to the color system.
val dynamic = Build.VERSION.SOK_INT = Build.VERSION_CODES.S
val colorScheme = if (dynamic) {
val context = LocalContext.current
// Use the dynamicLightColorScheme function to create a ColorScheme instance with light dynamic values
// or use dynamicDarkColorScheme to create an instance with dark dynamic values
// Pass in Context to get dynamic color matching resources from Android system
if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
} else {
// use lightColorScheme or darkColorScheme
}
Multi-screen size adaptation
With the increase of various tablets and folding screen devices, more and more applications need to consider the effect of running under various screen sizes, and can dynamically respond to changes in screen size.
enum class WindowSizeClass { Compact, Medium, Expanded }
@Composable
fun MyApp(windowSizeClass: WindowSizeClass) {
// Select a navigation element based on window size.
when (windowSizeClass) {
WindowSizeClass.Compact - { /* Bottom bar */ }
WindowSizeClass.Medium - { /* Rail */ }
WindowSizeClass.Expanded - { /* Persistent drawer */ }
}
}
MD has three major specifications, Color, Shape and Typography. These specifications are the corresponding constants defined in the MateriaTheme when these specifications are implemented in the code, for us to refer to in the project. Next, let's take a look at the changes of M3 from these three aspects.
ColorColor
The color system of M3 is consistent with the overall idea of M2. Both use the color slot (ColorRule) to classify the color scenes in the application, but the definition of the color slot has been adjusted and added. There are 25 color slots defined in M3, as shown in the table below. Many color slots are inherited from M2, and the green frame part is the newly added content of M3.
In the color slot table, the vertical direction is classified according to the usage scene and importance. Just like a performance with protagonists and supporting roles, works with clear primary and secondary are more beautiful. The scene can be divided into three categories:
- AccentColor (accent color): including Primary, Secondary, and Tertiary, these are the actors on the stage, followed by the lead actor, the second and third actors. We can assign these colors according to the importance of UI components, Primary is used for those components with the most important functions or the largest area.
- NeutralColor: Includes Background and Surface, which are environments and sets on stage that can be used as a component's background color to complement the starring performance.
- AdditonalColor: They are some special props that only appear in special scenes, such as Error and so on.
The color slot table is horizontal, and each group of colors is composed of four shades, which can be used together inside the component.
Take the Primary color slot as an example:
- Primary & OnPrimary: inherited from M2. Primary is the base color of this group of colors, and OnPrimary is used to contrast with the content displayed above Primary. 1 and 2 as shown above
- PrimaryContainer & OnPrimaryContainer: The newly added definitions of M3, they are lighter in color and can be used on 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. They are selected according to the importance of components. The difference is that they are the same color as Primary, which is suitable for forming larger components with Primary, which is more coordinated.
The different shades of the same group are taken from the color palette. The following is the Primary palette. The palette consists of 13 colors. The larger the number, the lighter the color, and vice versa, the darker the color. Light/Dark themes are also picked from the palette
ColorScheme is used in M3 to define a set of color slot schemes. Take the Compos-M3 code as an example:
class ColorScheme( ColorScheme (
primary: Color,: Color ,
onPrimary: Color,: Color ,
/*omit*//*omit*/
))
Set the theme color by setting ColorScheme in Theme
import androidx.compose.material3.MaterialTheme androidx.compose.material3.MaterialTheme _ _ _ _ _ _
@Composablefun MaterialTheme (@Composablefun MaterialTheme (
colorScheme: ColorScheme,: ColorScheme ,
typography: Typography,: Typography ,
// Function to update Shape is coming// Function to update Shape is coming
content: @Composable () -> Unit: @Composable () -> Unit
))
Shape
In terms of shape, first of all, the classification of shapes has changed between M3 and M2
M2M3
Text Typography
FAB floating button
- The shape changed from a circle to a rounded rectangle
- Added a Large (96dp) large size FAB, M2 has only Default (56dp) and Mini (40dp) sizes by default
- The default background color changed from Primary to Primary Container
- The height of the Extended Fab is aligned with the Fab, and the vision is more unified. The heights of the two are slightly different in M2.
Button
- The basic shape changed from a rounded rectangle to half circle
- Text buttons are no longer in all caps, they are case sensitive
- Increase height (36dp > 45dp)
Chip label
- The semicircle becomes a rounded rectangle (as if M3 and M2 have swapped round <> rounded corners on the component shape...)
- Adjustment of function types, Actioin class Chip is split into Assist and Suggestion types
- By default, there is no shadow (elevation = 0). The M3 component cancels a lot of shadow elements by deepening the color contrast of the border and weakens the quasi-physical style as a whole.
TopAppBar title bar
- By default, the shadow is canceled, and the shadow will be added when scrolling (Elevation = 2)
- Height increases, the font gets bigger
- The definition of Primary Variant in M2 has been deleted in M3, which was originally used in StatusBar with a darker color than Primary, and M2 StatusBar is also Primary, creating an immersive title bar
Switch
- Larger area and increased height
- Cancel the shadow and turn the quasi-object into a flat
- Add identifiable graphics such as checkmarks to be more friendly to color blindness
NavigationBar
- First of all, the name has changed, M2 is called Bottom Navigation, and M3 is called NavigationBar
- Removed shadows, increased height
- M2 indicates the selected state through the transparency of the color, and M3 adds an Outline
Dialog
- Increased the font of the Title
- Increased padding
- Larger rounded corners
In addition to the above components, the styles of other components have not changed much, most of which are to cancel the shadow, increase the area, etc.
0 Comments