In material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper.
The system may draw pixels for elements such as status or system bars, which don’t reside on paper. It’s helpful to think of such system elements as being printed on the back side of the display’s glass, on a surface that is separate from the app content beneath it.
Seams are created when two sheets of paper share the full length of a common edge. Sheets joined by a seam generally move together.
Steps are created when two sheets of paper overlap. Sheets that have different z-positions typically move independently of each other.
A toolbar is a strip of paper used to present actions. The actions cluster on either side of the toolbar. Navigation actions, such as a drawer menu icon or an up arrow, appear at the left, while contextual actions appear at the right.
The left and right actions in a toolbar are never split by another sheet of paper. However, a toolbar can constrain its width to less than the full length of its paper.
Toolbars frequently form a step above another sheet of paper that displays the content that the toolbar’s actions relate to. As that sheet of paper scrolls beneath the toolbar, the toolbar clips it at the point of entry, preventing it from passing through to the opposite side.
A toolbar can also be initially presented as seamed with a second sheet of paper, but then lift to form a step. This variant of clipping is called waterfall.
Alternately, the toolbar can maintain its seam, pushing off the screen as the two sheets of paper move together.
Finally, the second sheet can cover the toolbar as it moves.
Toolbars have a standard height, 56 dp on mobile and 64 dp on desktop, but they can be taller. When taller, the actions can be pinned to either the top or the bottom of the toolbar.
Toolbars can change height dynamically once they become pinned. When resizing, they snap incrementally.
A floating action is a circular sheet of paper separate from a toolbar.
A floating action represents a single promoted action. A floating action can straddle a step if it relates to the content of the paper creating that step.
A floating action can straddle a seam if it relates to the content of both of the papers creating that seam.
Never introduce a decorative seam merely to provide an anchoring point for an action.