Shape and motion

Elements can change shape in response to content changes or user interaction.


Usage

Morphing is the act of changing one shape into another. Shapes can morph in response to changes in state or content, or as a result of user interaction. For example, when rotating a mobile device from portrait to landscape, surfaces can respond by changing size, which can cause shapes to morph.

Shapes can morph for various reasons, such as to remain consistent with a visual language as surface dimensions change, or to indicate when items are added to a selected set.

Morphing can cause changes to:

  • Element prominence
  • Element ergonomics
  • The meaning of a particular shape
  • How well a surface expresses a brand’s visual language
  • Relationships between elements
DoA shape can morph in response to changes in the UI. This bottom app bar morphs upon the entrance of a floating action button.
DoA surface can reflect state changes by changing its dimensions. The corner of this surface maintains its curve while the edge grows.

Morphing shape

Morphing shape

As a surface changes size, its shape can maintain its original position or dimensions, it can stretch, or it can shrink. A shape can...

As a surface changes size, its shape can maintain its original position or dimensions, it can stretch, or it can shrink. A shape can also morph between two different shapes.


Dimensions

DoShape can maintain its original dimensions and position when morphing. This shape (B) retains its original dimensions and position relative to one side (A) of the surface, while the other side (C) stretches.
DoA surface may change its dimensions to retain its shape. The height (A) of this portion of the surface changes as its width changes in order to maintain its angled slope.

Stretching and shrinking

A shape can stretch or shrink in response to changes in surface dimensions. Morphing a shape should preserve the proportions of distinctive shapes.

A shape can stretch or shrink in response to changes in surface dimensions. Morphing a shape should preserve the proportions of distinctive shapes.

DoAs this surface stretches, its shape remains recognizable because its distinctive rounded corners keep the same proportions even as portions of the surface change dimensions.
Don'tAvoid distorting shapes when stretching or shrinking a surface. This surface’s proportions and rounded corners change as the surface stretches, creating a disconnect between its beginning and end states.

Resizing shape

Maintain the aspect ratio of distinctive shapes when resizing them to avoid shape distortion.

Maintain the aspect ratio of distinctive shapes when resizing them to avoid shape distortion.

The corner radius maintains its original aspect ratio when it moves and resizes, supporting a consistent visual language.

Transforming shape

A shape can transform into a different shape.

A shape can transform into a different shape.

CautionTransforming between similar shapes produces smoother transitions. Transformations between different shapes can display awkward states during a transition.

Displaying content

Content visibility

All content on a surface should be visible while the surface morphs, without clipping content.

All content on a surface should be visible while the surface morphs, without clipping content.

DoA shaped component should change its dimensions to accommodate content changes, while maintaining that component's shape.
Don'tDon't separate a surface from its content when morphing. The shape of this top app bar causes these action icons to appear separate from the surface.

Default shape

By default, Material surfaces are rectangular. They can transform from rectangular shapes into other shapes, and vice versa. For example, a round floating action button...

By default, Material surfaces are rectangular. They can transform from rectangular shapes into other shapes, and vice versa. For example, a round floating action button can become a rectangular menu, and then return to its original round shape.

Rectangular shapes maximize the space available for scrollable content and blend in with other rectangular surfaces. As a result, content receives emphasis.

When using the default rectangular shape, you can add a cue (such as a collapse or expand icon) to indicate how to transform the surface.

Maximize space

Rectangular shapes maximize space for scrollable content.

DoA round floating action button transitions into a rectangular menu to maximize space for content.
Don'tChoose shapes for expanded surfaces that are optimized for the content they display. This circular menu does not effectively display its content because it maintains the circular shape of the FAB.
Space is maximized to display list content when this curved expanding sheet transforms into the default rectangular shape.

Focus attention

Rectangular surfaces blend in with other rectangular surfaces, allowing content to receive emphasis.

When the backdrop's back layer is active, the default shape of the front layer reduces its prominence and focuses user attention on the filter options behind it.

Up next