Sticky view at the bottom of bottom sheet

[omkar-tenkale]

Please complete the following information:

• Library Version 0.1.3

Describe the Bug: Im trying to show a sticky view at bottom of bottom sheet by wrapping the sheet composable and the view within a column but it doesnt seem to work

 Column {
                    FlexibleBottomSheet()
                    Button()    
}

This causes effect of similar to wrapping the children in a Box composable instead, but the sheet is on top always irrespective of order because it actually adds window on top of views in android.

How can this be implemented correctly? @skydoves

Example:

[omkar-tenkale]

I think it boils down to rendering another composable on top of bottomsheet composable without making it part of bottom sheet itself

[skydoves]

Hey @omkar-tenkale, what's the expected behavior?

[omkar-tenkale]

Current

 setContent {
            Column(Modifier.background(Color.Gray)) {
                FlexibleBottomSheet(
                    onDismissRequest = {},
                    sheetState = rememberFlexibleBottomSheetState(
                        skipSlightlyExpanded = true,
                    )

                ) {
                    Text("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 = "HOVERING BUTTON",modifier =  Modifier.padding(16.dp).background(Color.Black).padding(16.dp).clip(RoundedCornerShape(12.dp)).fillMaxWidth(), color = Color.White, textAlign = TextAlign.Center)
            }
        }

Closer to expected:

Tried to achieve expected with this code but the button moves with the sheet, not static at bottom.

setContent {
            Box(modifier = Modifier.background(Color.Gray),
            ){
                FlexibleBottomSheet(
                    onDismissRequest = {},
                    sheetState = rememberFlexibleBottomSheetState(
                        skipSlightlyExpanded = true,
                    )

                ) {
                    Box() {
                        Text("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 = "HOVERING BUTTON",modifier =  Modifier.align(Alignment.BottomCenter).padding(16.dp).background(Color.Black).padding(16.dp).clip(RoundedCornerShape(12.dp)).fillMaxWidth(), color = Color.White, textAlign = TextAlign.Center)
                    }
                }
            }
        }

[omkar-tenkale]

@skydoves ?

[skydoves]

Hey @omkar-tenkale, sorry for the delayed response. What if you just use Popup for resolving this issue under the flexible bottom sheet? As you mentioned the bottom sheet is implemented with the Window, so you should use another Window to display something over the bottom sheet.

[omkar-tenkale]

That actually doesn't fit the use case bit thanks anyway. Looks like it'll be too big of a change for this library

[skydoves]

Actually, you can implement a similar one that seems to be sticky by implementing the content inside the bottom sheet by ordering well the composable functions if you don't really need to create another window, which has the lowest z-order on the view hierarchy.

[omkar-tenkale]

correct but the floating view must update its height as well, which needs to coordinate with the sheet scroll listener, but i dont exactly know how, maybe you can share an example?