Currently is there any way to create CollapsibleTo...

# compose

[zoha131]

Currently is there any way to create CollapsibleToolbarLayout in compose? With Scaffold compose?

[nickbutcher]

There isn't a collapsing toolbar component but here's an example of creating your own https://github.com/android/sunflower/blob/compose/app/src/main/java/com/google/samples/apps/sunflower/compose/plantdetail/PlantDetailView.kt

[Yann Badoual]

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

[Yann Badoual]

Btw can be fixed easily by setting a contentPadding on the ScrollableColumn
As seen on this gif.

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

[Archie]

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:

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))
        }
    }
}