In 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 :
|
|
|
|
|
6980 Views |
|