Backdrop

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


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

The backdrop is immediate, relevant, and contextual.

Read More

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

Read More

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

Read More

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

Read More

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

Don’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 the front layer or tapping a conceal affordance on either layer.

Read More

The back layer can be concealed by either interacting with the 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.

Read More

Content on the front layer has different scrolling behaviors (and restrictions) than content on the back layer.

Do.

Content on the front layer can scroll horizontally.

Don’t.

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

Do.

If the front layer is minimized, content on the back layer can scroll vertically.

Caution.

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

Read More

This travel app’s backdrop has been customized using Material Theming. Areas of customization include color and shape.

Crane’s customized backdrop.

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.

Element

Category

Attribute

Value

Front layer

Large component

Family

Size

Rounded

16;16; n/a; n/a dp*

*The backdrop can only be shaped on the top left and top right corners.

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

Read More

Shrine is a retail app, and its backdrop has been customized using Material Theming. Areas of customization include color and shape.

Shrine's customized backdrop

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.

Element

Category

Attribute

Value

Front layer

Large component

Family

Size

Cut

24;0; n/a; n/a dp*

*The backdrop can only be shaped on the top left and top right corners.


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

Read More
  • 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

Implementation

Backdrop implementation support for each platform is indicated below.

Android Material Component

Status: Under Development

Flutter Material Component

Status: Code Available