Jetpack Compose Basics - How to use Backdrop Scaffold composable

Don't forget to check out previous articles in the Jetpack compose basics series. We have already covered Scaffold, Snackbar, Showing Image, Text Input, Modal Bottom Sheet and Composition local.

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

@Composable
fun BackdropScaffold(
    appBar: @Composable () -> Unit,
    backLayerContent: @Composable () -> Unit,
    frontLayerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed),
    gesturesEnabled: Boolean = true,
    peekHeight: Dp = BackdropScaffoldDefaults.PeekHeight,
    headerHeight: Dp = BackdropScaffoldDefaults.HeaderHeight,
    persistentAppBar: Boolean = true,
    stickyFrontLayer: Boolean = true,
    backLayerBackgroundColor: Color = MaterialTheme.colors.primary,
    backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),
    frontLayerShape: Shape = BackdropScaffoldDefaults.frontLayerShape,
    frontLayerElevation: Dp = BackdropScaffoldDefaults.FrontLayerElevation,
    frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,
    frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),
    frontLayerScrimColor: Color = BackdropScaffoldDefaults.frontLayerScrimColor,
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }
)

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
 

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
 

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
 

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
 

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!