Google updates Material 3 with new FAB-integrated bottom app bar, switches, and more


Prior to I/O 2022, Google updated its design documentation with the latest Material 3 components. This follows the initial additions in October.

In Material 2, the bottom application bar (i.e. Google Tasks) had a floating action button (FAB) that was centered and either floated above or had a cutout just for it. Material 3 sees the lower app bars contain the FAB directly to the right of the screen.

Intended to show navigation and other key actions, the bottom app bars are now taller, while there is no longer a shadow (for elevation) and the element is compatible with Dynamic Color.

The bottom app bars draw attention to important on-screen actions and the floating action button (FAB).

Meanwhile, Google has added articles for two more types of M3 buttons:

Icon buttons help users perform additional actions with a single click. They are used when a compact button is required, such as in a toolbar or an image list.

Previously known as toggle buttons, they come in standard (1) and content (2) types, while Google advises including a “tooltip describing the action of the button, rather than the name of the button. the icon itself” on hover.

Segmented buttons help users select options, change views, or sort items.

Sentence case is now used instead of all capitals in segmented buttons.

There is also documentation for text fields, the notable addition being theme compatibility.

Finally, Android 12 introduced a new Switch design last year, but Material 3 made it official today. Compared to what’s already on Android, the new design is narrower but slightly taller. The other important aspect is the possibility for the thumb of the round switch to contain an icon.

Hardware 3 I/O 2022

Learn more about the hardware:

Dylan Roussel contributed to this article

FTC: We use revenue-generating automatic affiliate links. After.


Check out 9to5Google on YouTube for more info:


Leave a Reply

Your email address will not be published.