CODEWITHSUNDEEP
android-jetpack-composeandroid-jetpackbottom-sheet
Danilo Bargen
Danilo Bargen

Reputation: 19472

Jetpack Compose BottomSheetScaffold: Smooth closing

I'm using Jetpack Compose with the BottomSheetScaffold. To be able to show and hide the bottom sheet from both within and outside the composable, I used a showBottomSheet: MutableState<Boolean> variable. The peek height within the composable is then determined like this:

val baseBottomSheetPeekHeight by remember { mutableStateOf(60.dp) }
val bottomSheetPeekHeight = if (showBottomSheet.value) baseBottomSheetPeekHeight else 0.dp

Later, in the BottomSheetScaffold, I use the variable like this:

BottomSheetScaffold(
  ...
  sheetPeekHeight = bottomSheetPeekHeight,
  ...
)

(Full reproducer project here: https://github.com/dbrgn/compose-repro)

This generally works as intended, I can set showBottomSheet.value to false to hide the bottom sheet. However, the hiding looks janky, because not all sub-composables are hidden at the same time.

GIF animation of the issue

It's a bit hard to see in the animation above due to the GIF conversion, but when closing the bottom sheet peek pane, the other content (below it) is visible for a short moment, before the bottom sheet disappears.

Is there a way to avoid this janky hiding behavior? Or even better, is there a way to smoothly animate the hiding of the pane?

Upvotes: 6

Views: 7098

Answers (1)

MariiaN
MariiaN

Reputation: 41

In my case for Smooth closing BottomSheetScaffold I used to: scaffoldState.bottomSheetState.animateTo(Collapsed, tween(duration)) -- (when duration is any Int you want). The same for Expanding: scaffoldState.bottomSheetState.animateTo(Expanded, tween(duration))

If you look at the source code of collapse() or expand() function, you will see there just calling animateTo(Expanded) and animateTo(Collapsed). You can customize animateTo() as you wish.

See animateTo() documentation.

Upvotes: 3

Related Questions