Material You is making the short bottom bar official, adding more ‘Expressive’ animation

Back at I/O 2023, the Material team previewed what’s next for Google apps on large screens, like foldables and tablets. Making Material You more expressive was one such goal and that’s now coming to fruition, while a short bottom bar is also coming.

Officially, the Material 3 bottom (navigation) bar is supposed to be tall. Most first-party apps abide by that, but there are some notable exceptions, like the new simplified Google Maps bottom bar.

As shared by Dylan Roussel today (and seen above), Material 3 will soon make that official the “Short Navigation Bar.” It’s the existing design just with less margins above and below. Meanwhile, apps like Gmail have opted out of labels to be even more compact.

On medium screens, like foldables, the Short Navigation Bar places the labels next to the icon.

In the context of tablets and foldables, Google believes a larger canvas allows apps to be more expressive. The Material showed off:

• “Icons that are reactive underneath your finger, built on Material symbols.”
• “Expanding the canvas size allows for a broader range of typographic expression and, when combined with variable fonts, facilitates smooth transitions between wide to narrow or thin to extra bold states, dynamically adapting to changing layouts and panes.”

Material 3 is getting new components in support of that vision, starting with Toggle Buttons that change from a rounded rectangle to one with sharper corners when pressed, and then a pill when toggled.

Even more delightful are Buttons Groups wherein an expanding button causes others around it to contract.

On the motion front, there are two categories. Spatial is when components change bounds or shapes, while an Effect reflects changes like colors shifting upon tap. Durations include Slow, Default, and Fast. 

Finally on the components front is a Wide Navigation Rail (which is different from a drawer).

More Material You:

• Google Maps bottom bar redesign rolls out on Android
• New Material 3 components include Floating App Bar, FAB menu, more [Gallery]
• Google’s Android apps have maddeningly inconsistent navigation drawers