At the 2021 Android Dev Summit earlier this week, Google detailed the Material Design 3 (technical name for Material You), aka M3, to developers. It showed off the new, Material You-based UI components that developers can use in their apps. Google has already updated most of its first-party Android apps with the new design language.
Google details Material You UI components to developers
Bottom navigation bar
Starting with the bottom navigation bar, it’s now taller than on the previous iteration, i.e. M2. Google has removed the drop shadow this year and is highlighting active states with “filled icons and a contrasting pill-shaped” indicator. Inactive states are represented with “outlined icons.” As 9to5Google notes, Android apps that have already picked up the Material You redesign have adopted this component. Gmail is one of them, though Google later decreased the height of the navigation bar to the same size as on the M2 design language. The report suggests that Gmail could get rid of the text labels to further decrease the height.
Navigation rail
Navigation rail, which is a vertical navigation bar for large screens, also undergoes a similar change. Active states are now highlighted using a pill-shaped indicator rather than colored icons as on M2. Navigation rails can also feature a FAB (floating action button) at the top, while the background can feature rounded corners. No app has implemented this design as yet.
Top app bar
For the top app bar, Google is offering four different designs: center-aligned, small, medium, and large. There’s no drop shadow here as well. Google is further replacing contrasting colors that separate the top bar from the content beneath with a “color fill overlay.”
FAB
As for FABs, Google is switching from a circular design to boxier ones, with rounded corners. There are two types of FABs: small and large. The former finds use in editing widgets while the latter has use cases in areas where we typically see large buttons, such as to start a voice recorder or set up an alarm. FABs have no text labels, so they should be “functionally explicit,” Google notes. “FAB should persist on the screen when content is scrolling.”
Extended FAB
For a visually more prominent button, M3 brings extended FABs that have the same height as regular FABs and an optional icon. On M2, extended FABs are pill-shaped and have different heights and elevations.
Buttons
Google is offering various pill-shaped button designs including elevated, filled, filled tonal, outlined, and text. They are slightly taller than on M2 and have more rounded corners. Also, button labels are now in sentence case rather than ALL CAPS.
Cards
Material Design 3 also brings three types of cards: elevated, filled, and outlined. The latter is used by Google Keep. The content inside cards will have “lower elevation” and will not feature a shadow by default.
Chips
The new Android design language features four types of chips: assist, filter, input, and suggestion. They are all now rounded rectangles. Earlier, smaller chips were pill-shaped, while larger ones took a rectangular shape with rounded corners. Google has also separated M2’s action chips into assist chips and suggestion chips on M3. Choice chips, meanwhile, are now a “subset of filter chips.”
Dialogs
Lastly, Android 12’s Material You brings two types of dialogs: basic and full-screen. Google says the former will feature “greater padding to account for the increased corner radius and title size”. As you can see in the attached image below, this type of dialog is used by the Recorder app when you are deleting an audio file.
