How to create bottom sheet dialog with Jetpack Compose?
Last updated Jan 22, 2022In this Jetpack compose tutorial we will learn How to create bottom sheet dialog in Android application using Jetpack Compose. Bottom sheet is an area containing additional content that are anchored to the bottom of the screen.
Scaffold basically provides API that will combine different material components to make our layout. In the same way BackdropScaffold uses a backdrop as the centerpiece of the screen.
To use bottom sheet we need BottomSheetScaffold which is annotated as ExperimentalMaterialApi, BottomSheetState (State which persistent bottom sheet in BottomSheetScaffold), remember BottomSheetScaffoldState ( which create and remember BottomSheetScaffoldState)
Some parameters for BottomSheetScaffold were given below:
sheetContent - Which contains the content of the bottom sheet.
scaffoldState - state of the Scaffold.
topBar - top bar bar which is optional field.
sheetPeekHeight - The height of the bottom sheet when it is collapsed.
sheetContentColor - To set the color for the bottomsheet childs items we will use this property. Defaults to the matching content color for sheetBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.
content - This the content of the Scaffold.
Let's get started
Step 1: Create android application in android studio
Step 2: Follow step for setup Jetpack Compose with Android Studio
Lets define bottomSheetScaffoldState which will hold the state of Scaffold
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState( bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed) ) |
Lets create list to show in bottom sheet
data class BottomSheetItem(val title: String, val icon: ImageVector) val bottomSheetItems = listOf( BottomSheetItem(title = "Folder", icon = Icons.Default.Folder), BottomSheetItem(title = "Upload", icon = Icons.Default.Upload), BottomSheetItem(title = "Scan", icon = Icons.Default.Scanner), BottomSheetItem(title = "Google Docs", icon = Icons.Default.Receipt), BottomSheetItem(title = "Google Sheets", icon = Icons.Default.Receipt), BottomSheetItem(title = "Settings", icon = Icons.Default.Settings) ) |
Ui for bottom sheet
Column( content = { Spacer(modifier = Modifier.padding(16.dp)) Text( text = "Create New", modifier = Modifier .fillMaxWidth(), textAlign = TextAlign.Center, fontWeight = FontWeight.Bold, fontSize = 21.sp, color = Color.White ) LazyVerticalGrid( cells = GridCells.Fixed(3) ) { items(bottomSheetItems.size, itemContent = { Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier .fillMaxWidth() .padding(top = 24.dp) ) { Spacer(modifier = Modifier.padding(8.dp)) Icon( bottomSheetItems[it].icon, "", tint = Color.White ) Spacer(modifier = Modifier.padding(8.dp)) Text(text = bottomSheetItems[it].title, color = Color.White) } }) } }, modifier = Modifier .fillMaxWidth() .height(300.dp) .background(Color(0xAA3fa7cc)) .padding(16.dp) ) |
top app bar ui
TopAppBar( title = { Text("Bottom Sheet Demo") }, backgroundColor = Color.White, contentColor = Color.Blue ) |
Add button to open bottom sheet
Column(modifier = Modifier.fillMaxSize()) { Button( modifier = Modifier .padding(20.dp), onClick = { coroutineScope.launch { if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) { bottomSheetScaffoldState.bottomSheetState.expand() } else { bottomSheetScaffoldState.bottomSheetState.collapse() } } } ) { Text( text = "Click to show Bottom Sheet" ) } } |
Full code
package com.example.jetpack import android.os.Bundle import android.view.WindowManager import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.ui.tooling.preview.Preview import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.GridCells import androidx.compose.foundation.lazy.LazyVerticalGrid import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.* import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import kotlinx.coroutines.launch class MainActivity : ComponentActivity() { @ExperimentalMaterialApi @ExperimentalFoundationApi override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE) setContent { BottomSheetDemo() } } } @ExperimentalMaterialApi @ExperimentalFoundationApi @Preview(showBackground = true) @Composable fun DefaultPreview() { BottomSheetDemo() } data class BottomSheetItem(val title: String, val icon: ImageVector) @ExperimentalFoundationApi @ExperimentalMaterialApi @Composable fun BottomSheetDemo() { val bottomSheetItems = listOf( BottomSheetItem(title = "Folder", icon = Icons.Default.Folder), BottomSheetItem(title = "Upload", icon = Icons.Default.Upload), BottomSheetItem(title = "Scan", icon = Icons.Default.Scanner), BottomSheetItem(title = "Google Docs", icon = Icons.Default.Receipt), BottomSheetItem(title = "Google Sheets", icon = Icons.Default.Receipt), BottomSheetItem(title = "Settings", icon = Icons.Default.Settings) ) val bottomSheetScaffoldState = rememberBottomSheetScaffoldState( bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed) ) val coroutineScope = rememberCoroutineScope() BottomSheetScaffold( scaffoldState = bottomSheetScaffoldState, sheetContent = { Column( content = { Spacer(modifier = Modifier.padding(16.dp)) Text( text = "Create New", modifier = Modifier .fillMaxWidth(), textAlign = TextAlign.Center, fontWeight = FontWeight.Bold, fontSize = 21.sp, color = Color.White ) LazyVerticalGrid( cells = GridCells.Fixed(3) ) { items(bottomSheetItems.size, itemContent = { Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier .fillMaxWidth() .padding(top = 24.dp) ) { Spacer(modifier = Modifier.padding(8.dp)) Icon( bottomSheetItems[it].icon, "", tint = Color.White ) Spacer(modifier = Modifier.padding(8.dp)) Text(text = bottomSheetItems[it].title, color = Color.White) } }) } }, modifier = Modifier .fillMaxWidth() .height(300.dp) .background(Color(0xAA3fa7cc)) .padding(16.dp) ) }, sheetPeekHeight = 0.dp, topBar = { TopAppBar( title = { Text("Bottom Sheet Demo") }, backgroundColor = Color.White, contentColor = Color.Blue ) } ) { Column(modifier = Modifier.fillMaxSize()) { Button( modifier = Modifier .padding(20.dp), onClick = { coroutineScope.launch { if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) { bottomSheetScaffoldState.bottomSheetState.expand() } else { bottomSheetScaffoldState.bottomSheetState.collapse() } } } ) { Text( text = "Click to show Bottom Sheet" ) } } } } |
Image
![]() |
Conclusion: In this Jetpack compose tutorial we covered how to work with bottom sheet in Jetpack compose.
Tags: What is Bottom Sheet, Bottom Sheet in Jetpack compose, Bottom Sheet Dialog, How to create Bottom Sheet in Jetpack Compose
Article Contributed By :
|
|
|
|
7511 Views |