About shape

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.


Shaping material

About shape

Material surfaces have a rectangular shape by default, with 4dp rounded corners. They have adjustable: Shape changes, such as rounded or clipped corners, can be...

Read More

Material surfaces have a rectangular shape by default, with 4dp rounded corners. They have adjustable:

  • Corner angles and curves
  • Edge angles and curves
  • The number of corners

Shape changes, such as rounded or clipped corners, can be subtle or more significant.

The default Material shape can be customized.

Usage

Because unique shapes stand out, they can direct attention to different parts of a screen. Shape provides a way for users to recognize components and...

Read More

Emphasis

Because unique shapes stand out, they can direct attention to different parts of a screen.

This combination of a round floating action button and curved bottom app bar stands out from the rectangular shapes elsewhere on screen.

Identity

Shape provides a way for users to recognize components and identify different Material surfaces.

These entry chips can be identified by their consistent use of shape.

State

You can communicate an element’s change of state by using a different shape from the rest of the elements or surfaces in that group. When using shape to indicate a state change, use it consistently with that state, in every instance it occurs.

This card changes shape upon selection to indicate it’s been selected.

Branding

To express a brand’s visual language throughout an app, use shape in tandem with other customizations (like color) in consistent ways. Small adjustments to shape, applied strategically through an app, contribute to the overall impression a brand makes.

The consistent use of shape throughout this app helps express its brand.

Displaying shape

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display...

Read More

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity, .

Do.

A colored fill on this floating action button contrasts with the content on the surface behind it, making its surface edges and shape noticeable.

Don’t.

A semi-transparent surface and white color makes it hard to see the edges and shape of this floating action button.


Shape and meaning

Communicating meaning

Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface...

Read More

Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous.

Do.

The menu has an arrow-like corner that points toward the navigation drawer, reinforcing that these components are connected.

Don’t.

Don’t use shapes in ways that create ambiguous meaning. This Cancel button’s label text implies that it will return the user to a previous point in the flow, but the arrow-shaped button points forward, as though it continues the flow’s progress.


Components and shape

Shaping components

Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:

Read More

Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:

  • If a component relies on its shape for identification
  • If it has ergonomic requirements, such as a minimum touch target size

Don’t.

Don’t use shapes that make components unrecognizable.

Don’t.

Don’t use shapes that interfere with a component’s ability to receive user input. This button has a touch target that is too small.

Don’t.

Don’t use shapes that make a component unrecognizable. These buttons look very similar to the chips above them, which makes it difficult to distinguish the two components.