https://kotlinlang.org logo
#compose
Title
# compose
z

zoha131

09/11/2020, 9:09 PM
Currently is there any way to create CollapsibleToolbarLayout in compose? With Scaffold compose?
n

nickbutcher

09/11/2020, 9:36 PM
y

Yann Badoual

09/11/2020, 10:32 PM
Was wondering the same thing earlier today, saw the sample in Jetsnack. The only issue is that the scrollable view is not adding contentPadding at the bottom in the case that the actual content is not scrollable. So we might not be able to collapse the toolbar, or worse we could collapse it partially only
Btw can be fixed easily by setting a
contentPadding
on the
ScrollableColumn
As seen on this gif.
Copy code
fun getScrollableContentPadding(density: Density): Dp {
    return with(density) {
        (pageSize.height + toolbarContentSize.height - scrollableContentSize.height).toDp() - AppBarSize
    }.coerceAtLeast(0.dp)
}
You can retrieve the size used with the
onPositioned
modifier
a

Archie

07/10/2021, 6:41 PM
Hi @nickbutcher, the example implementation was based on a
Box
I tried integrating the same concept with a
Scaffold
instead but immediately found out that the
topBar
slot for the
TopAppBar
would still be there even if I offset it, hence the LazyColumn clipping. Was just wondering whether its just not recommended to make
Scaffold
work with a
CollapsingToolbar
. Here’s part of the Code:
Copy code
Scaffold(
    Modifier
        .fillMaxSize()
        // attach as a parent to the nested scroll system
        .nestedScroll(nestedScrollConnection),
    topBar = {
        TopAppBar(
            modifier = Modifier
                .height(toolbarHeight)
                .offset { IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt()) },
            title = { Text("toolbar offset is ${toolbarOffsetHeightPx.value}") }
        )
    }
) {
    // our list with build in nested scroll support that will notify us about its scroll
    LazyColumn {
        items(100) { index ->
            Text("I'm item $index", modifier = Modifier.fillMaxWidth().padding(16.dp))
        }
    }
}
3 Views