CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpackbottom-sheet
user496854
user496854

Reputation: 6830

Android compose ModalBottomSheetLayout jumps on content size change

I basically have the same problem as this post, except I'm using Jetpack Compose, instead of the old View model. It happens with any kind of content - I tested it with a simple Text composable. Here's how to reproduce it:

  1. Set the Text composable to display a string that ends up making it 6 lines high
  2. Change the text (while the Bottom Sheet stays expanded) to only be 1 line high. In my test case, I just made it so that clicking the text would change it
  3. The top of the Text composable stays at the previous level, and the bottom "jumps" up for a split second to make up the height difference. Then the whole composable drops back down, and ends up at the bottom of the screen, where it was supposed to have been all along

This only happens when the new content is shorter in height then the original (that's why I tested it with 6 lines worth of text changing to 1 line). The original post I referenced says that the solution is to setandroid:animateLayoutChanges = "false", however, I don't see any equivalent in Compose. There's a modifier for animateContentSize, but it's only to enable animation. I don't see any option to disable it.

Here's my sample code:

ModalBottomSheetLayout(
        sheetContent = {
            var text by remember{ mutableStateOf("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum")}
            Text(text = text, Modifier.clickable {
                text = "a much shorter line of text"
            })
        },
        sheetShape = RoundedCornerShape(12.dp),
    ) { ... }

Upvotes: 25

Views: 6823

Answers (3)

Luka Dulčić
Luka Dulčić

Reputation: 41

It's a bug in ModalBottomSheetLayout → https://issuetracker.google.com/258744762

Upvotes: 4

Raul Lucaciu
Raul Lucaciu

Reputation: 162

One not so great way to do this is to use fixed size and a scrollable view. Like you can set the height of the expanded bottom sheet to .height(0.4f) and so the bottom sheet won't be shrinking anymore on content height changes.

Upvotes: 0

nglauber
nglauber

Reputation: 23964

I think you can use SubcomposeLayout to measure the text's max height. Then, wrap the Text with a Box using the max height calculated in the subcomposition.

You can use the composable function below as sheetContent parameter.

@Composable
fun BottomSheetContent() {
    var maxHeight = remember { 0.dp }
    var text by remember { mutableStateOf("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum") }

    val localDensity = LocalDensity.current
    SubcomposeLayout { constraints ->
        // Measuring the Text size...
        val contentPlaceable = subcompose("SomeRandomIdForThisContent") {
            Text(text = text,
                Modifier
                    .clickable {
                        text = "a much shorter line of text"
                    }
            )
        }.first()
            .measure(constraints)
        val height = contentPlaceable.height
        val heightInDp = with(localDensity) { ((height + 1) / density).dp }
        // Updating the max height
        if (maxHeight == 0.dp || heightInDp > maxHeight) {
            maxHeight = heightInDp
        }

        layout(contentPlaceable.width, maxHeight.roundToPx()) {
            contentPlaceable.placeRelative(0, 0)
        }
    }
}

Here's the result:

enter image description here

Upvotes: 0

Related Questions