z

    zoha131

    2 years ago
    Currently is there any way to create CollapsibleToolbarLayout in compose? With Scaffold compose?
    nickbutcher

    nickbutcher

    2 years ago
    Yann Badoual

    Yann Badoual

    2 years ago
    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.
    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

    Archie

    1 year ago
    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))
            }
        }
    }