Component behavior - Material Design

Visual presentation is the most common method of adaptation. This type of adaptation affects the scale and placement...

Visual presentation is the most common method of adaptation. This type of adaptation affects the scale and placement of content and objects on screen, as well as their relationships to each other. For example, a text list on a mobile device can adjust margins, vertical spacing, or density to better fit larger screens like tablets.

Size constraints

Material Components have minimum and maximum values for container dimensions, margins, and padding. For size constraints of each component, visit the Components section.

For example, snackbars have a maximum width of 600dp for large screens. These minimum and maximum values allow for continuous change to the component’s visual presentation as a layout expands from mobile to large screens.

When scaling a layout, components can have fixed or responsive widths within the range of size constraints.

Elements with fixed widths remain the same width regardless of a screen’s size.

Elements with responsive widths expand and contract as a screen size changes.

Internal Composition

When scaling a component, define the position and alignment of its internal elements in relationship to the container.

For example, the icon and text label within an icon button remain anchored to each other and remain centered while the button expands horizontally.

For more complex components, like app bars, internal elements can be grouped and anchored to multiple points within the container.

For example, a menu icon and logo can be grouped and anchored to the leading edge, while a search bar is anchored to the center, and action icons  are anchored to the trailing edge.

A component’s internal composition should accommodate the ergonomic needs of the device on which it’s displayed. For example, a horizontally-oriented card on a mobile device can shift to a more square-shaped card on larger screens. This adaptation gives more prominence to imagery and allows for larger type styles to enhance readability.

As a layout scales across screen sizes, functionally equivalent components can be interchanged to make large-scale changes to the ergonomic and functional qualities of an interface.

As a layout changes across screen sizes, components with similar functions can also be exchanged. This makes it possible to adjust a layout for large-scale changes to the ergonomic and functional qualities of an interface.

For example, a bottom navigation bar can swap with a navigation rail on tablets, and a navigation drawer on larger screens.

Components can switch types as well. For example, a full-screen dialog on mobile can  be exchanged with a simple dialog on larger screens. This component change maintains the function of the dialog, while also making use of screen space in a way that preserves a user’s context by revealing underlying content.

Some functionally-equivalent component groups are defined below.

Use caution when swapping components by ensuring that the interchangeable components are functionally equivalent. Do not, for example, swap a button for a chip. Use caution when changing between list items and cards. The component swap should always serve a functional and ergonomic purpose for the user.