Material design is a design language and style created by Google. It was launched in June, 2014. At first company employees referred to it by the code-name quantum paper. The basic metaphor of material design is a flat sheet of paper in 3D space.
Why does Material Design matter? Material Design provides a uniformity of experience that Google products have been lacking. It’s mobile-centric focus also represents an important shift in the company’s approach to design.
What Is Material Design for? Material design serves two goals: it unifies the company’s numerous products and it unifies Android app interfaces.
The “navigation bar” was previously referred to as “bottom navigation” in M2, and more colloquially “bottom bar.” It’s taller, there’s no shadow, and Google advises placing items that are “relatively equal in importance.”
The current tab you’re viewing is noted by “filled icons and a contrasting pill-shaped active indicator, while inactive states are represented with outlined icons.” All of the updated Material You apps have adopted this component, though Gmail decreased the height back to the M2 era shortly after launch. It might be planning to further drop the height by getting rid of text labels.
Meanwhile, there’s the “navigation rail” for large screens. It’s basically a bottom bar but vertical, while a FAB can appear at the top just before the “navigation drawer,” which has only been slightly tweaked. The background can feature rounded corners, but no apps today appear to be implementing that yet.
Another common component you’re interacting with is the “top app bar.” There are four variants: center-aligned (1), small (2), medium (3), and large (4). The bigger difference is how there’s no drop shadow, and that a “color fill overlay separates the top app bar from the content beneath.”
Looking at the floating action button, there’s the regular “FAB,” which now makes use of a boxier shape with a smaller corner radius. There’s also the “small FAB” and “large FAB.” The former is currently used for editing widgets (e.g. Google Drive) after they’ve been placed on the homescreen, while the latter reflects the use of enormous buttons to start Google Recorder or add a new alarm in Clock. Google recommends that the “FAB should persist on the screen when content is scrolling,” and be functionally explicit as there are no text labels.
