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

Do.

A shape can morph in response to changes in the UI. This bottom app bar morphs upon the entrance of a floating action button.

Do.

A 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 or it can shrink. A shape can...

Read More

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

Dimensions

Do.

Shape 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.

Do.

A 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.

Read More

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

Do.

As 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’t.

Avoid 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.

Read More

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.

Read More

A shape can transform into a different shape.

Caution.

Transforming 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.

Read More

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

Do.

A shaped component should change its dimensions to accommodate content changes, while maintaining that component’s shape.

Don’t.

Don’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...

Read More

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.

Do.

A round floating action button transitions into a rectangular menu to maximize space for content.

Don’t.

Choose 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.