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.

Beatification

You can prefer this article: johncodeos.com/… – Schlock

You can refer the Jetpack Compose Material 3 components available here. BottomSheetScaffold is not yet available in Material 3. – Jolda

Checked today with the latest Material 3 Lib material3:1.0.0-alpha16 and BottomSheetScaffold is not yet available on Material 3. – Caa

ModalBottomSheet has been added to compose version 1.1.0-alpha06, I have edited my answer to update this! – Heterogony

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!

Mesosphere

Excellent, thanks for hacking it straight from the Oven before it is served. – Caa

Thanks for the gist! If someone wants to track this issue, here is the issue tracker for the missing bottom sheet component. – Swithin

This is awesome, great job! How difficult do you think it would be for me to port over ModalBottomSheetLayout for usage? If you had a link to the place you pulled the source you modified that would be helpful, I don't know much about Google's source repos. – Histolysis

It is already available in M3 – Milling

Answer 2

We finally have ModalBottomSheet in Material3.

Update With new update there is edge to edge feature if you want to enable or disable

    val windowInsets = if (edgeToEdgeEnabled)
        WindowInsets(0) else BottomSheetDefaults.windowInsets


var openBottomSheet by rememberSaveable { mutableStateOf(false) }
val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded  = true)



// Sheet content
if (openBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = { openBottomSheet = false },
        sheetState = bottomSheetState,
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
            Button(
                // Note: If you provide logic outside of onDismissRequest to remove the sheet,
                // you must additionally handle intended state cleanup, if any.
                onClick = {
                    scope.launch { bottomSheetState.hide() }.invokeOnCompletion {
                        if (!bottomSheetState.isVisible) {
                            openBottomSheet = false
                        }
                    }
                }
            ) {
                Text("Hide Bottom Sheet")
            }
        }
    }
}

For more to read: link.

Luxury

What about BottomSheetScaffold? – Milling

@Milling available in androidx.compose.material3:material3:1.1.0-alpha08 – Extensive

Since androidx.compose.material3:material3:1.1.0-alpha08 you can't use rememberSheetState and skipHalfExpanded, so you should edit you code from val bottomSheetState = rememberSheetState(skipHalfExpanded = true) to val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) – Extensive

I just got even worse then the normal ModalBottomSheet of material library, before you could just use the bottom sheet state to show/hide, but now you have to control it over a flag cause if you use the state and try to hide it, it keeps there with a little offset and you can't interact with the screen behind... LOL – Foy

Erf.. who have a good implementation of it ? – Underhanded

This API is horrendous. In order to control the visibility of the bottom sheet you have to update it both declaratively AND imperatively! – Sprat

Why you maintained variable openBottomSheet, if we can call bottomSheetState.show() to show the ModalBottomSheet ? – Wycliffite

Answer 3

UPDATE 23/02/2023

As of Compose Material3 version 1.1.0-alpha06 ModalBottomSheet is now available as an experimental composable (docs)

---

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!

Heterogony

Nice. I'd definitely add the close action to onDismissRequest, otherwise pressing the system back button does not close the dialog. – Albertoalberts

It's version 1.1.0-alpha07 by today :| – Essa

Yes but alpha06 was the first version it was added in, not sure if that's what you meant – Heterogony

Answer 4

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

Ravenous

Answer 5

BottomSheetScaffold is available in 1.1.0-alpha08

see https://developer.android.com/jetpack/androidx/releases/compose-material3#1.1.0-alpha08

Yorkshire

Now also in stable (1.1.0). But they removed the drawer from it. – Swithin

Answer 6

Update July 2023

BottomSheetScaffold of M2 is now part of M3 as experimental API

Here is a example how you can use it

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.runtime.rememberCoroutineScope

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetPeekHeight = 128.dp,
    sheetContent = {
    Box(
        Modifier
            .fillMaxWidth()
            .height(128.dp),
        contentAlignment = Alignment.Center
    ) {
        Text("Swipe up to expand sheet")
    }
    Column(
        Modifier
            .fillMaxWidth()
            .padding(64.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Sheet content")
        Spacer(Modifier.height(20.dp))
        Button(
            onClick = {
                scope.launch { scaffoldState.bottomSheetState.partialExpand() }
            }
        ) {
            Text("Click to collapse sheet")
        }
    }
}) { innerPadding ->
    Box(Modifier.padding(innerPadding)) {
        Text("Scaffold Content")
    }
}

Or if you like you can use standalone ModelBottomSheet as shown in code snippet below

https://github.com/android/snippets/blob/7322f58994e9ade5ffee8e49f956e4a97339f384/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L362

imports:

import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.material3.ModalBottomSheet

Code

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheetDemo(title: String, modifier: Modifier = Modifier) {
    ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
        // Sheet content
    }

    val sheetState = rememberModalBottomSheetState()
    val scope = rememberCoroutineScope()
    var showBottomSheet by remember { mutableStateOf(false) }
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text(title) },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    showBottomSheet = true
                }
            )
        }
    ) { contentPadding ->
        // Screen content
        Box(modifier = Modifier.padding(contentPadding)) { /* ... */ }

        if (showBottomSheet) {
            ModalBottomSheet(
                onDismissRequest = {
                    showBottomSheet = false
                },
                sheetState = sheetState
            ) {
                // Sheet content
                Button(onClick = {
                    scope.launch { sheetState.hide() }.invokeOnCompletion {
                        if (!sheetState.isVisible) {
                            showBottomSheet = false
                        }
                    }
                }) {
                    Text("Hide bottom sheet")
                }
            }
        }
    }
}

Fritzsche

Thanks Hitesh, until now I did not know there is a ModalBottomSheet and then there is the BottomSheetScaffold. Thanks for posting on both components on Material 3, we are clear, wish I could upvote * 2. – Caa