Jetpack Compose Basics - How to use Backdrop Scaffold composable
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.
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.
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
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
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
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.