Jetpack Compose Basics series - How to use Backdrop Scaffold composable
Technology
3
 min read
November 29, 2021

Jetpack Compose Basics series - How to use Backdrop Scaffold composable

Peter Šuly
Peter Šuly
Android developer

Backdrop component is composed of 2 surfaces: back layer and front layer. Purpose of back layer is to display context. Part of the it is appBar. Purpose of front layer is to show content based of context from back layer. Backdrop is implemented in Jetpack Compose as BackdropScaffold composable.

Anatomy of backsrop as stated in Material design guidelines
Don't forget to check out previous articles in the Jetpack compose basics series. We have already covered Scaffold, Snackbar, Showing Image and Text Input.

BackdropScaffold

BackdropScaffold, as usual in Jetpack Compose, has many parameters for customization, three of them are mandatory

  • appBar - app bar for the back layer. App bar is fully visible only if peekHeight is exactly the same height as app bar. You can leave empty lambda here for no app bar or use recommended TopAppBar or provide custom composable
  • backLayerContent - content of back layer
  • frontLayerContent - content of front layer

Other parameters are optional:

  • modifier - used for changes from the caller side
  • scaffoldState - used to control state of backdrop. Through this state you can set the animation of revealing backdrop or initial BackdropValue of backdrop. It can be either concealed (back layer is hidden) or revealed (back layer is shown)
  • gesturesEnabled - whether the backdrop can be interacted by gestures
  • peekHeight - height of visible part of back layer when it is concealed
  • headerHeight - minimum height of front layer when it is inactive
  • persistentAppBar - if the app bar should be shown when back layer is revealed
  • stickyFrontLayer - if front layer should stick to height of back layer
  • backLayerBackgroundColor - background color of back layer
  • backLayerContentColor - content color of back layer
  • frontLayerShape - shape of front layer
  • frontLayerElevation - elevation of front layer
  • frontLayerBackgroundColor - background color of front layer
  • frontLayerContentColor - content color of front layer
  • frontLayerScrimColor - color of the scrim applied to front layer in inactive state. Transparent color can be used
  • snackbarHost - snackbar wrapper

Most of them is easy to understand, some of them are little harder. Examples will be demonstrated on BackdropScaffold looking like this. It has appBar with navigation arrow and title. Back layer with 2 text fields and front layer with list of cats.

peekHeight

Height of visible part of back layer when it is concealed. In this example peekHeight is set to 100dp, in simpler words, when back layer is concealed 100dp of it will be visible.

peekHeight = 100.dp
Concealed back layer with peekHeight 100dp

stickyFrontLayer

If front layer should stick to height of back layer. Default value is true so the top of front layer is sticked to bottom of back layer. When false is set and headerHeight is left with default value (56dp), then only 56dp of front layer will be visible. In example headerHeight is not modified and stickyFrontLayer is set to false.

stickyFrontLayer = false
Revealed back layer with sitckyFrontLayer false

headerHeight

Minimum height of front layer when it is inactive. In this example, headerHeight is set to 100dp. stickyFrontLayer need to be set to false if we want that small height of front layer otherwise front layer will stick to height of back layer.

headerHeight = 100.dp,
stickyFrontLayer = false
Revealed back layer with headerHeight 100dp and stickyFrontLayer false

persistentAppBar

If the app bar should be shown when back layer is revealed. In this example, initial state of back layer is revealed and toolbar is not visible. With the gesture, state transitions to concealed which shows app bar.

persistentAppBar = false
Transition between revealed and concealed state of backdrop, showing and hiding of app bar

Default look of BackdropScaffold

This is example of backdrop without any modifications. Starting from revealed state of back layer with persistent app bar and front layer sticking to back layer.

Looking for future in Android development? We're looking for new teammates!

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.