Backdrop

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

beta

Guidance in beta reflects the latest Material Design insights. It may significantly change to support new research and code.

Learn more or send us your feedback.

Android Not available Web Not available Flutter Not available iOS Not available

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.

1. Back layer
2. Front layer
1. When concealed, the back layer can provide contextual information about the front layer.
2. When revealed, the back layer displays contextual controls that relate to the front layer.
Back layer content can be navigational, changing the content displayed on the front layer.
Back layer content can filter front layer 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.

1. Back layer
2. Front layer
3. Subheader (optional)

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.

The front layer can contain browsing components, such as:
1. Text lists
2. Image lists
3. Cards
4. Text
When the front layer is active, the backlayer contains a reveal affordance (1). Tapping this reveals the backlayer.

Subheader (Optional)

The subheader is a fixed area on the front layer that contains a title and optional iconography.

The subheader can be fixed in place, while content below it on the front layer scrolls independently.
Both the subheader (A) and scrollable content area (B) on the front layer have an elevation of 1dp.

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.

The back layer contains components for navigation or filtration, such as:
1. Navigation
2. Steppers
3. Text fields
4. Selection controls

These components affect content on the front layer.
A: The elevation value for the backdrop’s back layer is 0dp.

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.

1. Icon and text
2. Scrim

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.

This back layer can be revealed by tapping the menu icon (1).
This back layer can be revealed by tapping any input field (1, 2, 3).
Don'tDon't use the swipe gesture on the front layer to reveal the back layer.
When the back layer is revealed, the front layer slides out of view.
The height of the back layer is based on the size of its content.

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.

This back layer can be concealed by tapping the back layer close icon (1), the entire front layer (2), or the front layer arrow (3).
When the back layer is revealed, the front layer content becomes inactive. To conceal the back layer, tap either anywhere on the front layer or the back layer's conceal affordance.
To conceal the back layer when the front layer isn't visible, tap the close affordance.

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.

DoContent on the front layer can scroll horizontally.
Don'tDon't let front layer content extend beyond its container, overlapping the back layer.
Use a subheader to scroll content vertically on the front layer.
When using a subheader, content on the front layer can retain its scroll position when the back layer is exposed
DoIf the front layer is minimized, content on the back layer can scroll vertically.
CautionBe careful when scrolling back layer content in a small area. Since the exposed backdrop is modal, expose as much content as possible.

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...

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...

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...

  • Measurement 56
  • Measurement 360
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 36
  • Measurement 32
  • Measurement 32
  • Measurement 24
 
  • Measurement 568
  • Measurement 360
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 12
  • Measurement 12
  • Measurement 32
  • Measurement 40
  • Measurement C
  • Measurement 36
  • Measurement 24
  • Measurement 24
 
No Android implementation guidance available
No Web implementation guidance available
No Flutter implementation guidance available
No iOS implementation guidance available

Up next