Usage
A backdrop is composed of two surfaces: a back layer and a front layer. The back layer displays actions and context, and these control and inform the front layer's content.
Principles
Relevant
The backdrop’s back layer is persistent, displaying controls and content that relate to the front layer.
Immediate
The backdrop’s back layer can be accessed from any scroll position.
Contextual
The backdrop focuses attention on one layer at a time.
Anatomy
A backdrop consists of a back layer, a front layer, and an optional subheader. Either the back layer or the front layer can be active at a time.
Active front layer
The front layer always appears in front of the back layer. It is displayed at full width and holds primary content. Material Design has three-dimensional...
The front layer always appears in front of the back layer. It is displayed at full width and holds primary content.
Subheader (Optional)
The subheader is a fixed area on the front layer that contains a title and optional iconography.
Active back layer
The back layer appears at the lowest elevation (0dp) in an app, filling the entire background. It holds actionable content that is relevant to the...
The back layer appears at the lowest elevation (0dp) in an app, filling the entire background. It holds actionable content that is relevant to the front layer.
When the back layer is active, the front layer can contain text and iconography, or a scrim, as affordances that provide a way to conceal the back layer.
Behavior
Revealing the back layer
To reveal the back layer, interact with any actions that appear on it. This back layer can be revealed by tapping the menu icon (1)....
To reveal the back layer, interact with any actions that appear on it.
Concealing the back layer
The back layer can be concealed by either interacting with the front layer or tapping a conceal affordance on either layer.
The back layer can be concealed by either interacting with the front layer or tapping a conceal affordance on either layer.
Content scrolling
Content on the front and back layers has different scroll behaviors and restrictions.
Content on the front layer has different scrolling behaviors (and restrictions) than content on the back layer.
Theming
Crane Material theme
This travel app's backdrop has been customized using Material Theming. Areas of customization include color and shape. Crane is a travel app that uses Material...
This travel app's backdrop has been customized using Material Theming. Areas of customization include color and shape.
Color
Crane's backdrop uses custom color on four elements: the back layer, the front layer, back layer icons, and front layer text.
Element | Category | Attribute | Value |
---|---|---|---|
Back layer | Primary | Color Opacity |
#5C1349 100% |
Back layer icons | On Primary | Color Opacity |
#FFFFFF 100% |
Front layer | Surface | Color Opacity |
#FFFFFF 100% |
Front layer text | On Surface | Color Opacity |
#000000 60% |
Shape
Crane's backdrop uses custom shapes on the top corners of the front layer. *The backdrop can only be shaped on the top left and top right corners.
Element | Category | Attribute | Value |
---|---|---|---|
Front layer | Large component | Family Size |
Rounded 16;16; n/a; n/a dp* |
Shrine Material theme
Shrine is a retail app, and its backdrop has been customized using Material Theming. Areas of customization include color and shape. Shrine is a lifestyle...
Shrine is a retail app, and its backdrop has been customized using Material Theming. Areas of customization include color and shape.
Color
Shrine's backdrop uses custom color on four elements: the back layer, back layer icons, the front layer, and front layer icons.
Element | Category | Attribute | Value |
---|---|---|---|
Back layer | Primary | Color Opacity |
#FEDBD0 100% |
Back layer icons | On Primary | Color Opacity |
#442C2E 100% |
Front layer | Surface | Color Opacity |
#FFFBFA 100% |
Front layer icons | On Surface | Color Opacity |
#442C2E 100% |
Shape
The front layer of Shrine's backdrop uses a custom cut corner on the top left, giving the backdrop an asymmetrical shape. *The backdrop can only be shaped on the top left and top right corners.
Element | Category | Attribute | Value |
---|---|---|---|
Front layer | Large component | Family Size |
Cut 24;0; n/a; n/a dp* |
Specs
Mobile
16dp #000000de 20dp #ffffff #6200ee R98 G0 B238 Top left, top right corner Rounded: 16dp Elevation 1dp Elevation 0dp All measurements are displayed in device-independent...
- 56 Measurement 56
- 360 Measurement 360
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 36 Measurement 36
- 32 Measurement 32
- 32 Measurement 32
- 24 Measurement 24
#6200ee
R98 G0 B238
- Shape
Top left, top right corner
Rounded: 16dp
- 568 Measurement 568
- 360 Measurement 360
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 12 Measurement 12
- 12 Measurement 12
- 32 Measurement 32
- 40 Measurement 40
- C Measurement C
- 36 Measurement 36
- 24 Measurement 24
- 24 Measurement 24
- Shape
Top left, top right corner
Rounded: 16dp