I’ve created a BottomSheet in Compose, the thing is that I’ve wrapped it on a BottomSheetDialogFragment.
Inside of it, I’ve created my BottomSheetScreen, the problem is that when scroll it doesn’t work as it should.
I’m testing it on two devices, small and normal one.
The problem is that in the normal one the BottomSheet is displayed correctly, everything is readable, but on the small one, everything is collapsed. The problem is the scroll in the small one, when scrolling down it does scroll, but when trying to scroll to top again it moves the BottomSheet.
Desired output:
When opening the BottomSheet on normal device (means that the text fit in the screen and doesn’t need any scroll to see the content), but in the small one it does scroll, but when trying to scroll back to the top, it moves the BottomSheet instead of scrolling up. I remember this could be fixed with NestedScrolling with RecyclerView but now in Compose what’s the alternative to just move the BottomSheet when there’s no more scroll to do?
This is my BottomSheet in case you need it.
Surface {
Column {
Spacer(modifier = Modifier.height(8.dp))
Divider(
modifier = Modifier
.size(32.dp, 5.dp)
.align(Alignment.CenterHorizontally)
.clip(RoundedCornerShape(45.dp))
.fillMaxWidth(),
color = MaterialTheme.colors.grey,
)
CloseButton(
onClick = onClose,
modifier = Modifier
.padding(start = 16.dp, top = 8.dp)
.size(24.dp),
)
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.weight(1f, false),
) {
Image(
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
painter = painterResource(id = R.drawable.ic_launcher),
contentDescription = null,
)
Spacer(modifier = Modifier.height(16.dp))
Text(
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
text = "This is the title",
style = MaterialTheme.typography.h2,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(8.dp))
Text(
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ornare lectus sit amet est placerat. Tortor dignissim convallis aenean et tortor at risus. Eget est lorem ipsum dolor sit. Quam quisque id diam vel. Viverra mauris in aliquam sem fringilla ut morbi tincidunt. Faucibus ornare suspendisse sed nisi lacus sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Neque convallis a cras semper auctor neque vitae tempus quam. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Ut tristique et egestas quis ipsum suspendisse ultrices. Velit scelerisque in dictum non consectetur.",
style = MaterialTheme.typography.body1,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(24.dp))
}
StickyBottom(onAcceptButton = onAcceptButton,
onRejectButton = onRejectButton)
}
}
Reference: BottomSheetDialogFragment – Allow scrolling child (stackoverflow.com)
I remember when doing XML instead of Compose.
Add Modifier.verticalScroll(rememberScrollState()) to the Text modifier instead of the column to make the text scrollable, that way you can scroll the text instead of the whole column probably avoiding the sheet to scroll too
1
For implementing BottomSheet in Compose you should use ModelBottomSheet from material3 lib.
Material3 gradle lib.
implementation("androidx.compose.material3:material3:1.3.0-alpha05")
Simple example of ModelBottomSheet:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheet(onDismiss: () -> Unit) {
val modalBottomSheetState = rememberModalBottomSheetState()
ModalBottomSheet(
onDismissRequest = { onDismiss() },
sheetState = modalBottomSheetState,
dragHandle = { BottomSheetDefaults.DragHandle() },
) {
CountryList()
}
}
@Composable
fun CountryList() {
val countries = listOf(
Pair("United States", "uD83CuDDFAuD83CuDDF8"),
Pair("Canada", "uD83CuDDE8uD83CuDDE6"),
Pair("India", "uD83CuDDEEuD83CuDDF3"),
Pair("Germany", "uD83CuDDE9uD83CuDDEA"),
Pair("France", "uD83CuDDEBuD83CuDDF7"),
Pair("Japan", "uD83CuDDEFuD83CuDDF5"),
Pair("China", "uD83CuDDE8uD83CuDDF3"),
Pair("Brazil", "uD83CuDDE7uD83CuDDF7"),
Pair("Australia", "uD83CuDDE6uD83CuDDFA"),
Pair("Russia", "uD83CuDDF7uD83CuDDFA"),
Pair("United Kingdom", "uD83CuDDECuD83CuDDE7"),
)
LazyColumn {
items(countries) { (country, flag) ->
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 10.dp, horizontal = 20.dp)
) {
Text(
text = flag,
modifier = Modifier.padding(end = 20.dp)
)
Text(text = country)
}
}
}
}
1
I’ve finally found a way to do so.
I had to add a new modifier to my Surface, this is the nestedScroll modifier where I can pass as a parameter for the connection and the dispatcher.
fun Modifier.nestedScroll(
connection: NestedScrollConnection,
dispatcher: NestedScrollDispatcher? = null
): Modifier
The trick is to pass this rememberNestedScrollInteropConnection() and then leave the verticalScroll(rememberScrollState() where you want to do the scroll.
This way works either for the small ones and for the normal ones.