Material environment
The physical world
In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light....
In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions, are communicated in ways that resemble how they move in the physical world. This spatial model can also be applied consistently across apps.
Depth
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment...
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.
On the web, the UI expresses 3D space by manipulating the y-axis.
Properties
Material surfaces have consistent, unchangeable characteristics and behaviors across Material Design.
Dimensions
Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
Shadows
Material surfaces at different elevations cast shadows.
Material surfaces at different elevations cast shadows.
Resolution
Material has infinite resolution.
Material has infinite resolution.
Content
Content is displayed in any shape and color on Material. Content does not add thickness to Material. Content is expressed without being a separate layer.
Content is displayed in any shape and color on Material. Content does not add thickness to Material. Content is expressed without being a separate layer.
Physical properties
Material is solid. User input and interaction cannot pass through material. Multiple Material elements cannot occupy the same point in space simultaneously. Material cannot pass...
Material is solid. User input and interaction cannot pass through material.
Multiple Material elements cannot occupy the same point in space simultaneously.
Material cannot pass through other Material. For example, one Material surface cannot pass through another Material surface when changing elevation.
Material does not behave like a gas.
Material is not fluid like a liquid or gel, though it may display content with these properties.
Transforming Material
Material can change shape. Material can change opacity. Material grows and shrinks only along its plane. Material bends or folds within the depth of the...
Material can change shape.
Material can change opacity.
Material grows and shrinks only along its plane.
Material bends or folds within the depth of the UI.
Material surfaces can join together to become a single Material surface.
When split, Material can rejoin. For example, if you remove a portion of Material from a surface, the surface will become whole again.
Movement
Material can be spontaneously generated or dismissed anywhere in the environment. Material can move along any axis. Material surfaces can coordinate their motion. Material motion...
Material can be spontaneously generated or dismissed anywhere in the environment.
Material can move along any axis.
Material surfaces can coordinate their motion.
Material motion along the z-axis is typically a result of user interaction.
Attributes
Basic Material surface
The basic Material surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Material Design result from modifications to this...
The basic Material surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Material Design result from modifications to this surface.
Behavior
Material surfaces can behave in certain ways: Surfaces can be divided into areas which display different types of behavior.
Material surfaces can behave in certain ways:
- Rigid surfaces remain the same size through all interactions.
- Stretchable surfaces can grow or shrink along one or more edges up to a size limit, then behave as rigid surfaces.
- Pannable surfaces remain the same size throughout interactions. They can display additional content upon scrolling within the area, until reaching a content limit. When this limit is reached, they behave as rigid surfaces in that scroll direction.
Composite surfaces
Surfaces can be divided into areas which display different types of behavior.
Stretchable surfaces
A stretchable surface can be stretched before reaching a limit, at which point the entire surface becomes rigid. Surfaces can stretch vertically, horizontally, or in...
A stretchable surface can be stretched before reaching a limit, at which point the entire surface becomes rigid. Surfaces can stretch vertically, horizontally, or in both directions.
Typically, user interaction with a surface will stretch it in one direction. For example, tapping "more details" can cause a card to grow vertically and display additional content.
Surface positioning and movement (x/y)
Surfaces can remain in a fixed position on the x- and y-axes, or can be moveable in any direction. Surface movement can be confined to...
Surfaces can remain in a fixed position on the x- and y-axes, or can be moveable in any direction.
Surface movement can be confined to a single axis, allow movement along a single axis at a time, or allow movement along both axes simultaneously.
Surfaces can move independently of each other, or their movement can affect or be dependent upon the movement of other surfaces.
A dependency can be based on a variety of mechanics, such as nearby surfaces moving when another surface expands, or the proportion of movement between surfaces moving in parallax.
Surface opacity
Material surfaces can be transparent, semi-transparent, or opaque.
Material surfaces can be transparent, semi-transparent, or opaque.
Text on transparent and semi-transparent surfaces may require background treatment to preserve legibility.
Transparent surfaces lack clear edges, making it difficult to determine where surfaces begin and end, and which surface content belongs to.
Scrim
Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct...
Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct user attention to other parts of the screen, away from the surface receiving a scrim.
Scrims can be applied in a variety of ways, including:
- Darkening or lightening the surface and its content
- Reducing the opacity of the surface and its content
Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.