Android Compose Bottom Sheet Example

This article explains you how to implement bottom sheets in android application using android compose. You can also check out jetpack compose related articles.

There are two types of bottom sheets: Persistent Bottom Sheet & Modal Bottom Sheet. We can integrate both bottom sheets in mobile app with help of Android Jetpack Compose. We are displaying football players names in our bottom sheets.

Android Compose Main Activity

package com.codingwithdhrumil.jetpackcomposebottomsheetsample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.codingwithdhrumil.jetpackcomposebottomsheetsample.ui.theme.JetpackComposeBottomSheetSampleTheme

class MainActivity : ComponentActivity() {
@ExperimentalMaterialApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

val listFootballers = listOf(
“Cristiano Ronaldo”,
“Lionel Messi”,
“Robert Lewandowski”,
“Neymar Jr.”,
“Kevin De Bruyne”,
“Mohamed Salah”,
“Kylian Mbappe”,
“Sergio Ramos”,
“Virgil Van Dijk”,
“Bruno Fernandes”,
“Sadio Mane”,
“Paul Pogba”,
)

setContent {
JetpackComposeBottomSheetSampleTheme {
Surface(color = MaterialTheme.colors.background) {
MainActivityLayout(listFootballers)
}
}
}
}
}

@Composable
@ExperimentalMaterialApi
fun MainActivityLayout(listFootballers: List<String>) {
//PersistentBottomSheet(listFootballPlayers = listFootballers)
ModalBottomSheet(listFootballPlayers = listFootballers)
}

@Preview(showBackground = true)
@Composable
@ExperimentalMaterialApi
fun DefaultPreview() {
JetpackComposeBottomSheetSampleTheme {
MainActivityLayout(ArrayList<String>())
}
}

Persistent Bottom Sheet

We can display persistent bottom sheet using BottomSheetScaffold composable function. BottomSheetScaffold has many parameters to customize persistent bottom sheet. scaffoldState parameter is used to manage state of bottom sheet such as expand, collapse.

sheetContent attribute is used to display UI of bottom sheet. topBar parameter is used to customize top bar of screen. content parameter is used to customize content of screen behind bottom sheet.

package com.codingwithdhrumil.jetpackcomposebottomsheetsample

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

@Composable
@ExperimentalMaterialApi
fun PersistentBottomSheet(listFootballPlayers: List<String>) {
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)

val bottomSheetScope = rememberCoroutineScope()

BottomSheetScaffold(
scaffoldState= bottomSheetScaffoldState,

sheetContent = {
LazyColumn {
items(listFootballPlayers) { footballPlayer ->
ListItem(
text = { Text(footballPlayer) },
)
}
}

},
sheetPeekHeight= 40.dp
) {
Button(
onClick = { bottomSheetScope.launch {
bottomSheetScaffoldState.bottomSheetState.expand()
} },
modifier = Modifier.padding(horizontal = 15.dp, vertical = 10.dp)
) {
Text(“Persistent Bottom Sheet”, fontSize = 20.sp)
}
}
}

Modal Bottom Sheet

ModalBottomSheetLayout is used to display modal bottom sheet in android application. remememberModalBottomSheetState and rememberCoroutineScope are used to manage state of modal bottom sheet.

package com.codingwithdhrumil.jetpackcomposebottomsheetsample

@Composable
@ExperimentalMaterialApi
fun ModalBottomSheet(listFootballPlayers: List<String>) {
val modalBottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden
)
val modalBottomSheetScope = rememberCoroutineScope()
ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetContent = {
LazyColumn {
items(listFootballPlayers) { footballPlayer ->
ListItem(
text = { Text(footballPlayer) },
)
}
}
},
) {
Button(
onClick = {
modalBottomSheetScope.launch {
modalBottomSheetState.show()
}
},
modifier = Modifier.padding(horizontal = 15.dp, vertical = 10.dp)
) {
Text(“Modal Bottom Sheet”, fontSize = 20.sp)
}