1. Tutorials
  2. Android

Jetpack Compose ModalBottomSheetLayout Sample

May 6, 2022 
@Composable
fun CardScreen() {
    val scaffoldState = rememberScaffoldState()
    val modalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Button(onClick = {
                coroutineScope.launch {
                  modalBottomSheetState.show()
                }
            }) {
                Text(text = "Show")
            }
        }
    }

    ModalBottomSheetLayout(
          sheetState = modalBottomSheetState,
          sheetContent = {
              LazyColumn {
                  item {
                      TextButton(modifier = Modifier.fillMaxWidth(), onClick = {
                          // do something
                      }) {
                          Row {
                              Icon(
                                  imageVector = Icons.Filled.Add,
                                  // painterResource(id = R.drawable.ic_baseline_add_24),
                                  contentDescription = "New Album"
                              )
                              Text("New Album")
                              Spacer(modifier = Modifier.weight(1f))
                          }
                      }
                  }
              }
          }
      ) {
          // you can also opt to put screen composable / scaffold here
      }
}
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
Tags:
Related entries:
Jetpack Compose Data Entry Screen With Firestore (Sample)
Jetpack Compose LazyColumn of Clickable Icon With Text
Jetpack Compose LazyVerticalGrid Within LazyColumn
Jetpack Compose Nested Lazycolumn
Jetpack Compose Paging Group Items Under Header
Jetpack Compose Google Places Show Nearby Places
Jetpack Compose Show Confirm Dialog
Jetpack Compose Show TextField with Popup Date and Time Picker
Jetpack Compose Show Progress Bar Dialog
Jetpack Compose Load Data (Flow.collectAsState) Common Mistakes (Compose Infinite Loop)
Jetpack Compose Load Data (Initial on Show) using Flow or Coroutines
Jetpack Compose Paging With Header
Jetpack Compose Paging Sample
Jetpack Compose Check Permission (Accompanist)
Jetpack Compose Navigation
Jetpack Compose Show Snackbar
Jetpack Compose load Firestore Data with Flow
Jetpack Compose Load Image With Coil
Android Jetpack Compose BottomNavigationBar With Compose Navigation
Android Jetpack Compose BottomNavigationBar
Guide to Start Learning Jetpack Compose
Jetpack Compose ModalBottomSheetLayout IllegalArgumentException: The initial value must have an associated anchor
Jetpack Compose Row Flow to Next Line (Auto Multiple Rows)
Jetpack Compose HorizontalPager Page Change Callback
Jetpack Compose Bottom Border
Jetpack Compose Tag Chip
Jetpack Compose Text Gradient Background With Shodow Text
Jetpack Compose Center
Jetpack Compose Navigation Return Result
Jetpack Compose Lauch Activity and Receive Result (Place Autocomplete example)
Jetpack Compose Show Budy Dialog
Jetpack Compose TextField Click
Jetpack Compose Weight
Jetpack Compose EditText/TextField Sample
Jetpack Compose Alertdialog Increase Spacing Between Title and Content
Jetpack Compose Navigation Pass Arguments/Data
Jetpack Compose Support Pass in Composable with Modifier.align (BoxScope DSL)
Run Jetpack Compose Paging on Background/IO Thread
Jetpack Compose Show and Hide TopAppBar at Each Screen
Jetpack Compose Hide BottomNavigation When Navigate to New Screen
Jetpack Compose Missing Material Icon
Jetpack Compose: State and LiveData
Jetpack Compose Load N Images per Row (Grid of Images)
Jetpack Compose CardView
Jetpack Compose Column onClick
Jetpack Compose Get Context
Jetpack Compose Icon Tint Color
Jetpack Compose Card Click
Jetpack Compose Text Single Line Elipsis (3 dot)
Jetpack Compose Textfield Input Capitalization
Jetpack Compose Change Textfield Background Color
Jetpack Compose Image Pager/Viewer (Side Scroll One by One)
Jetpack Compose Scrollable Column
Jetpack Compose Launch Coroutines
Jetpack Compose LazyColumn Add Divider
Jetpack Compose Has No Method Getvalue or Setvalue
Jetpack Compose Set Background Color
Jetpack Compose Fill Container Height/Width With ProgressBar
Jetpack Compose Center Text Vertically
Jetpack Compose Material Color Change Alpha
Jetpack Compose: Pass ViewModel to Composable Function
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.