Material surfaces have consistent, unchangeable characteristics and behaviors across Material Design.

Properties

Material surfaces have a default state of opaque white, with 1dp thickness, and casts a shadow. Every attribute is an alteration of this state.

Attributes

Material Design has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows.

University of Michigan - Ann Arbor

Material Design mirrors the material world in the way objects and elements move and interact on the interface. 

- Surfaces
- Elevation
- Light and Shadows

Environment

Material Design Documentation

Surfaces

In the Material Design environment, the UI illuminated by virtual light sources called key lights and ambient lights. Material surfaces cast shadows when they obstruct light sources.

Light and Shadows

"Elevation is the relative distance between two surfaces along the z-axis."

Component elevation values:
- Nav drawer: 16dp
- App bar: 4dp
- Card: 1dp to 8dp
- FAB: 6dp
- Button: 2dp to 8dp
- Dialog: 24dp

Learn Before

Related

Learn After