Improving the Modal Bottom Sheet API in Jetpack Compose
Have you ever wondered “I like modal bottom sheets, but hot damn, that is an annoying API”? Well fear that thought no more! Because boy, will I show you something.
Now that that over-exaggerated first paragraph is in and I got your attention, let me show you the problem I was facing. Or should I say: mild inconvenience. It all starts, as with any problem in software development, when your UX designer wants to use nice looking features throughout the app, such as a modal bottom sheet. Now, for our use cases, we can use the sheets as a form of dismissable notification, or as a form of screen overlay to do actual stuff, so we do use them in multiple places.
Technical setup
We are using the amazing Jetpack Compose framework with the Material3 library on top. As you may know, Material3 already includes the ModalBottomSheet, so we obviously want to use that. As you also may know, with Jetpack Compose, we basically eat state for breakfast, state for lunch and state for dinner, with a nice state as dessert to finish it all up. So naturally, I am inclined to make our usage of these bottom sheet state-based as well:
@Composable
fun OhMyGodIAmAComposable(viewModel: MyViewModel) {
val viewState by viewModel.viewState.collectAsState()
// <Box with button>
if (viewState.showSheet) {
ModalBottomSheet(
onDismissRequest = viewModel::closeSheet,
) {
Text("I am a sheet!")
Button(onClick = viewModel::closeSheet) {
Text("Close")
}
}
}
}Note that this code has been edited a bit to show only the essential parts! But what you can see is that when we want to show a sheet, the ModalBottomSheet is added to our composition, and when we no longer want to show the sheet, it is simply removed. When we run it, we can see the following behavior:
That obviously raises the question: Where is my sliding out animation? Why does it slide in, but not out?
Understanding Bottom Sheet internals
Under the hood, a bottom sheet is a dialog. And this dialog will use the system's default dialog animations. When we make the dialog appear in our composition, the dialog is popped up and a slide-in animation is triggered by the Material library as well. When we take the element out of the composition, we naturally can not do a similar thing and slide it out: As soon as it leaves the composition, it is Bye Bye and no more animations!
The obvious solution
So we have a bottom sheet, and it takes a bottom sheet state. We could go the obvious way and create our own bottom sheet state every time we use the modal bottom sheet component. Then we can hide the sheet manually and make sure it leaves our composition after it is hidden:
@Composable
fun OhMyGodIAmAComposable(viewModel: MyViewModel) {
val viewState by viewModel.viewState.collectAsState()
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberModalBottomSheetState()
if (viewState.showSheet) {
ModalBottomSheet(
onDismissRequest = viewModel::closeSheet,
sheetState = bottomSheetState,
) {
Text("I am a sheet!")
Button(
onClick = {
coroutineScope.launch {
bottomSheetState.hide()
viewModel.closeSheet()
}
},
) {
Text("Close")
}
}
}
}And here we can see that the sliding out animation is now working as one may expect:
The better solution
Existing components as inspiration
Our components should reflect state in an easy and understandable way, and not worry about side effects. We should hide away all the logic of animating the bottom sheets, because our components should not be cluttered with this kind of behavior. Obviously, showing and hiding stuff with a nice animation isn’t exactly new. Therefore, we can take a look at existing composables like AnimatedVisibility, and what its API looks like:
So we can see that it simply defines a visible: Boolean parameter, and that triggers all the work! Now as an experiment, let's see how our fictional sheet behaves if we don’t use the sheet but put it inside an AnimatedVisibility:
@Composable
fun OhMyGodIAmAComposable(viewModel: MyViewModel) {
val viewState by viewModel.viewState.collectAsState()
AnimatedVisibility(
viewState.showSheet,
Modifier.align(Alignment.BottomCenter),
enter = slideInVertically { fullHeight -> fullHeight },
exit = slideOutVertically { fullHeight -> fullHeight },
) {
Surface(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colorScheme.surfaceContainerLow,
shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp)
) {
Column(
modifier = Modifier.padding(24.dp),
verticalArrangement = spacedBy(8.dp),
) {
Text("I am a sheet!")
Button(onClick = viewModel::closeSheet) {
Text("Hide me")
}
}
}
}
}It is not a real sheet, we don’t have the behavior we expect, BUT: We flip a boolean flag, and it nicely appears and disappears with an animation!
Putting it together
Naming things is a shit business. I have no idea what would be a good name; it is a modal bottom sheet that has an easier API, while ensuring proper sliding animations. I could call it AnimatedModalBottomSheet, or whatever, but that is just a mouthful. The working name, therefore, during the rest of this article, will be a simple AnimatedBottomSheet. So now we have decided on this important matter, we can do the following:
- Create a AnimatedBottomSheet Composable which wraps around the ModalBottomSheet Composable.
- Add a visibility parameter:
isVisible - Add a little extra code that shows/hides the modal bottom sheet based on the visibility flag.
- Be in awe of our newfound solution
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AnimatedBottomSheet(
isVisible: Boolean,
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
sheetState: SheetState = rememberModalBottomSheetState(),
sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
shape: Shape = BottomSheetDefaults.ExpandedShape,
containerColor: Color = BottomSheetDefaults.ContainerColor,
contentColor: Color = contentColorFor(containerColor),
tonalElevation: Dp = 0.dp,
scrimColor: Color = BottomSheetDefaults.ScrimColor,
dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets },
properties: ModalBottomSheetProperties = ModalBottomSheetDefaults.properties,
content: @Composable ColumnScope.() -> Unit,
) {
LaunchedEffect(isVisible) {
if (isVisible) {
sheetState.show()
} else {
sheetState.hide()
onDismissRequest()
}
}
// Make sure we dispose of the bottom sheet when it is no longer needed
if (!sheetState.isVisible && !isVisible) {
return
}
ModalBottomSheet(
onDismissRequest = onDismissRequest,
modifier = modifier,
sheetState = sheetState,
sheetMaxWidth = sheetMaxWidth,
shape = shape,
containerColor = containerColor,
contentColor = contentColor,
tonalElevation = tonalElevation,
scrimColor = scrimColor,
dragHandle = dragHandle,
contentWindowInsets = contentWindowInsets,
properties = properties,
content = content,
)
}After we have our fancy new AnimatedBottomSheet, we can include it in our original composable:
@Composable
fun OhMyGodIAmAComposable(viewModel: MyViewModel) {
val viewState by viewModel.viewState.collectAsState()
Box(
modifier = Modifier
.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Button(onClick = viewModel::showSheet) {
Text("Open sheet")
}
}
AnimatedBottomSheet(
isVisible = viewState.showSheet,
onDismissRequest = viewModel::closeSheet,
) {
Column(
modifier = Modifier.padding(24.dp),
verticalArrangement = spacedBy(8.dp),
) {
Text("I am a sheet!")
Button(onClick = viewModel::closeSheet) {
Text("Close")
}
}
}
}No we can toggle the open and close as we can see in the following GIF:
1-upping the solution
Let’s say we do not just wish to show a bottom sheet based on a boolean flag, but we want to dynamically add content? Well, we can create a generic AnimatedBottomSheet, which can take a nullable value instead of a boolean flag. If the value is null, we hide the bottom sheet, if the value is something else, we can build our sheet with it! Let’s have a look at what that may look like:
@Composable
fun <T> AnimatedBottomSheet(
value: T?,
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
sheetState: SheetState = rememberModalBottomSheetState(),
sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
shape: Shape = BottomSheetDefaults.ExpandedShape,
containerColor: Color = BottomSheetDefaults.ContainerColor,
contentColor: Color = contentColorFor(containerColor),
tonalElevation: Dp = 0.dp,
scrimColor: Color = BottomSheetDefaults.ScrimColor,
dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets },
properties: ModalBottomSheetProperties = ModalBottomSheetDefaults.properties,
content: @Composable ColumnScope.(T & Any) -> Unit,
) {
LaunchedEffect(value != null) {
if (value != null) {
sheetState.show()
} else {
sheetState.hide()
onDismissRequest()
}
}
if (!sheetState.isVisible && value == null) {
return
}
ModalBottomSheet(
onDismissRequest = onDismissRequest,
modifier = modifier,
sheetState = sheetState,
sheetMaxWidth = sheetMaxWidth,
shape = shape,
containerColor = containerColor,
contentColor = contentColor,
tonalElevation = tonalElevation,
scrimColor = scrimColor,
dragHandle = dragHandle,
contentWindowInsets = contentWindowInsets,
properties = properties,
) {
// Remember the last not null value: If our value becomes null and the sheet slides down,
// we still need to show the last content during the exit animation.
val notNullValue = lastNotNullValueOrNull(value) ?: return@ModalBottomSheet
content(notNullValue)
}
}
@Composable
fun <T> lastNotNullValueOrNull(value: T?): T? {
val lastNotNullValueOrNullRef = remember { Ref<T>() }
return value?.also {
lastNotNullValueOrNullRef.value = it
} ?: lastNotNullValueOrNullRef.value
}Now we can do some nice things! Let’s say, we have 2 different types of sheets:
sealed interface SuperSpecialSheetContent {
data class Simple(
val title: String,
): SuperSpecialSheetContent
data class WithButton(
val buttonText: String,
): SuperSpecialSheetContent
}We can now use this amazing sealed interface to show different sheets. We can even animate nicely between the different sheets, and once we nullify the content, the sheet slides away into oblivion.
@Composable
fun OhMyGodIAmAComposable(viewModel: MyViewModel) {
val viewState by viewModel.viewState.collectAsState()
AnimatedBottomSheet(
value = viewState.sheetContent,
onDismissRequest = viewModel::closeSheet,
) { sheetContent ->
Column(
modifier = Modifier.padding(24.dp),
verticalArrangement = spacedBy(8.dp),
) {
AnimatedContent(sheetContent) { specialSheetContent ->
when (specialSheetContent) {
is SuperSpecialSheetContent.Simple ->
Text(specialSheetContent.title)
is SuperSpecialSheetContent.WithButton ->
Button(onClick = viewModel::onShowOtherSheet) {
Text(specialSheetContent.buttonText)
}
}
}
Button(onClick = viewModel::closeSheet) {
Text("Close")
}
}
}
}And the result, a simple to use and state-based AnimatedBottomSheet! As you can see in the GIF below, it behaves like a normal Modal Bottom Sheet. It will slide in and out nicely, and you can still drag it to close as how you see fit!
Final thoughts
Our own AnimatedBottomSheet reuses most of the normal ModalBottomSheet API, including the onDismissRequest when the sheet is supposed to be dismissed. Al the side effects and animation logic are nicely incorporated into our custom Composable, meaning we don’t have to bother with that after the initial creation of the very reusable component. On top of this, you can also add your own default values for the parameters and perhaps add some more customization. In this way, you have 1 standardized modal bottom sheet which fits your needs and is very easy to use!
Let me know what you think about this approach in the comments! And if you like what you saw, put those digital hands together. Joost out.
