Layout Principles

Principles

Material design uses fundamental tools that have come from the world of print design, like baseline grids and a common set of structural grids that work across various pages. The layout is designed to scale across different screen sizes and will help facilitate UI development and ultimately help you create scalable apps.

The layout guidelines also encourage apps to have a consistent look and feel by using the same visual elements, structural grids, and general spacing rules across platforms and screen sizes. Structural and visual consistency creates an environment for the user that is recognizable across products, which provides users with a high level of familiarity and comfort.

Before delving into layout details, consider the rules of how the material behaves and how it is crafted.

Paper craft Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Arranging paper

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.

Paper toolbars

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.

Do.

Constrain width to less than the full length of its paper

Don't.

Never allow a sheet of paper to be split by another sheet of 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.

Floating actions

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.