Material Design Material properties

Material properties

Material has certain immutable characteristics and inherent behaviors.

Understanding these qualities of material will help you manipulate material in a way that’s consistent with the vision of material design.

Material characteristics

Solid
Occupies unique points in space
Impenetrable
Mutable shape
Changes in size only along its plane
Unbendable
Can join to other material
Can separate, split, and heal
Can be created or destroyed
Moves along any axis

Material Design characteristics: solid, mutable, and unique

Physical properties Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).

Material Design: Variable height and width

Do.

The height and width of material can vary.

Material Design is always 1dp thick

Don’t.

Material is always 1dp thick.

Material casts shadows.

Shadows result naturally from the relative elevation (z-position) between material elements.

Do.

Shadows depict the relative elevation between material elements.

Don’t.

Shadows are never approximated by coloring material.

Content is displayed on material, in any shape and color. Content does not add thickness to material.

Do.

Material can display any shape and color.

Content can behave independently of the material, but is limited within the bounds of the material.

Do.

Content behavior can be independent of the behavior of material.

Material is solid.

Input events cannot pass through material.

Material Design: Input events affect foreground material

Do.

Input events only affect the foreground material.

Material Design: Input events can't pass through

Don’t.

Input events cannot pass through material.

Multiple material elements cannot occupy the same point in space simultaneously.

Use elevation to separate Material Design elements

Do.

Using elevation to separate material elements is one method of preventing multiple material elements from occupying the same point in space simultaneously.

Material Design: Multiple elements can't occupy the same space

Don’t.

Multiple material elements cannot occupy the same point in space simultaneously.

Material cannot pass through other material.

For example, one sheet of material cannot pass through another sheet of material when changing elevation.

Don’t.

Material cannot pass through other material.

Transforming material Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material can change shape.

Material can change shape.

Material grows and shrinks only along its plane.

Do.

Material grows and shrinks only along its plane.

Material never bends or folds.

Don’t.

Material never bends or folds.

Sheets of material can join together to become a single sheet of material.

Multiple sheets of material can join together to become a single sheet.

When split, material can heal. For example, if you remove a portion of material from a sheet of material, the sheet of material will become a whole sheet again.

Material can split and become whole again.

Movement of material Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material can be spontaneously generated or destroyed anywhere in the environment.

Material can be spontaneously generated or destroyed.

Material can move along any axis.

Material can move along various axes.

Z-axis motion is typically a result of user interaction with material.

Z-axis motion prompted by user interaction.