How to implement BottomSheet in Material 3 Jetpack Compose Android

Question

I know how to implement BottomSheet in Material 2 Jetpack Compose using BottomSheetScaffold .

But there is no BottomSheetScaffold in Material 3. Also, there is nothing in official samples about BottomSheet.

Answer 1

So I was able to make it work!

It seems that, as of today, BottomSheetScaffold is not available yet on Material3, this is discussed in this issue I found digging around: https://issuetracker.google.com/issues/229839039

I quote the important part from the reply of a google dev:

we aren't in a super easy spot with Swipeable. It currently has a number of critical bugs that need to be addressed first (we are working on this), which is why we are limiting the surface we are exposing for Swipeable in M3 for the time. Our plan for the coming months is to focus on this specific area and improve developer experience.

Material 3 for Jetpack Compose is still in alpha - this means we consider components production-ready, but the API shape is flexible while in alpha. This gives us space to iterate while getting real-world feedback from developers, which ultimately helps improve your experience. Copy-pasting source code for components that are not (fully) implemented or exposed in an alpha version can be a good thing to do in the meantime! Owning the source code while the API shape is still flexible gives you a number of benefits like ease of updating dependencies, even if the APIs change, and allows you to evolve your components in your own pace.

So I just followed the advice and I copy pasted BottomSheetScaffold into my project. Of course it did not work straight away because of a few missing classes and some minor API changes. At the end I was able to make it work by pulling and hacking the following classes and adding them to my project:

• BottomSheetScaffold.kt
• Drawer.kt
• Strings.kt
• Swipeable.kt

I have created a gist with the source code if you want to try: https://gist.github.com/Marlinski/0b043968c2f574d70ee6060aeda54882

You will have to change the import to make it work on your project as well as add the "-Xjvm-default=all" option by adding the following into your gradle file in the android{} section:

android{ 
   ...
   kotlinOptions {
        freeCompilerArgs += ["-Xjvm-default=all"]

        // "-Xjvm-default=all" option added because of this error:
        // ... Inheritance from an interface with '@JvmDefault' members is only allowed with -Xjvm-default option
        // triggered by porting BottomSheetScaffold for Material3 on Swipeable.kt:844
   }
}

It works very well for me, will keep this solution until it is officially supported in material3.

Hope it helps!

Answer 2

I got pretty similar results using a fullscreen dialog with AnimatedVisibility, here is the code if interested:

// Visibility state for the dialog which will trigger it only once when called
val transitionState = remember {
    MutableTransitionState(false).apply {
        targetState = true
    }
}

Dialog(
    onDismissRequest = { // You can set a visibility state variable to false in here which will close the dialog when clicked outside its bounds, no reason to when full screen though },
    properties = DialogProperties(
        // This property makes the dialog full width of the screen
        usePlatformDefaultWidth = false
    )
) {

    // Visibility animation, more information in android docs if needed
    AnimatedVisibility(
        visibleState = transitionState,
        enter = slideInVertically(
            initialOffsetY = { it },
            animationSpec = ...
        ),
        exit = slideOutVertically(
            targetOffsetY = { it },
            animationSpec = ...
        )
    )
) {

    Box(
        modifier = Modifier.fillMaxSize().background(color = ...)
    ) {
        // Your layout

        // This can be any user interraction that closes the dialog
        Button(
            transitionState.apply { targetState = false }
        ) ...
    }
}

All of this is in a composable function that gets called when a UI action to open said dialog is performed, it's not ideal but it works.

Hope I was able to help!

Answer 3

There is already a great answer by Marlinski , but i would like to add that there is also a ModalBottomSheetLayout which also does not have any implementation for Material 3.

I created a gist for people who need it in use right now: https://gist.github.com/Pasha831/bdedcfee01acdc96cf3ae643da64f88a