Hi i am using the compose backdrop ```BackdropScaf...
# compose
t
Hi i am using the compose backdrop
Copy code
BackdropScaffold
there are a number of features i do not like and would like to customise 1). when the back layer is open the user cannot interact with the frontlayer. is there any way i can enable frontlayer interactions while the backdrop is open? 2). i would like to animate the transition between Hamburger and Cross icon, however i cannot see how to achieve this. 3). I have added my own animation for conceal/reveal of the back layer which i like however it has made the transition between the hamburger and cross icon very "sluggish" what have i done wrong?
­čĹŹ 1
Copy code
val scaffoldState = rememberBackdropScaffoldState(
    initialValue = BackdropValue.Concealed, animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    )
)
val scope = rememberCoroutineScope()

BackdropScaffold(
    backLayerBackgroundColor = MaterialTheme.colorScheme.secondary,
    backLayerContentColor = MaterialTheme.colorScheme.onSecondary,
    scaffoldState = scaffoldState,
    appBar = { ShowcaseAppBar(scaffoldState, scope) },
    backLayerContent = { ShowcaseBackLayerContent() },
    frontLayerContent = { ShowcaseFrontLayerContent() },
    peekHeight = 60.dp,
) {

}
Copy code
SmallTopAppBar(
    title = {
        Text(text = "Showcase", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurface)
    },
    navigationIcon = {
        if (scaffoldState.isConcealed) {
            IconButton(
                onClick = {
                    scope.launch { scaffoldState.reveal() }
                }
            ) {
                Icon(
                    <http://Icons.Default.Menu|Icons.Default.Menu>,
                    contentDescription = "Menu"
                )
            }
        } else {
            IconButton(
                onClick = {
                    scope.launch { scaffoldState.conceal() }
                }
            ) {
                Icon(
                    Icons.Default.Close,
                    contentDescription = "Close"
                )
            }
        }
    },
    actions = {
        IconButton(onClick = { Timber.e("Display Overflow app bar actions") }) {
            Icon(
                imageVector = Icons.Rounded.MoreVert,
                contentDescription = "Localized description"
            )
        }
    }
)
ok
setting the frontlayerscrim colour to unspecified enables interaction with the frontlayer
Copy code
BackdropScaffold(
    backLayerBackgroundColor = MaterialTheme.colorScheme.secondary,
    backLayerContentColor = MaterialTheme.colorScheme.onSecondary,
    scaffoldState = scaffoldState,
    appBar = { ShowcaseAppBar(scaffoldState, scope) },
    backLayerContent = { ShowcaseBackLayerContent() },
    frontLayerContent = { ShowcaseFrontLayerContent() },
    frontLayerScrimColor = Color.Unspecified,
    peekHeight = 60.dp,
)
however i have an issue that my frontlayer contains a list of items and when i try to scroll the list it closes the backdrop instead of scrolling down the list items
also found that....
Copy code
gesturesEnabled = false,
disables scrolling the frontlayer to close,
now all i have to fix is the performance issues with animating the transition between the hamburger and close icons
j
Would you mind filing these as separate issues in the Material component? ­čÖé https://issuetracker.google.com/issues?q=status:open%20componentid:742043&amp;s=created_time:desc