Minimum height after collapsing

[sceneren]

CollapsingTopBarScaffold(
        state = topBarScaffoldState,
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        topBar = { topBarState ->
            CollapsingTopBarColumn(
                state = topBarState,
                collapseDirection = CollapsingTopBarColumnDirection.TopToBottom
            ) {
                NetImage(
                    modifier = Modifier
                        .clipToCollapse()
                        .fillMaxWidth()
                        .aspectRatio(1080f / 700f),
                    model = "https://picsum.photos/1080/700?random=1"
                )
                
                PrimaryScrollableTabRow(
                    modifier = Modifier
                        .notCollapsible(),
                    containerColor = LocalColors.current.background,
                    selectedTabIndex = selectedIndex,
                    edgePadding = 10.dp,
                    minTabWidth = 30.dp,
                    divider = {},
                    indicator = {}
                ) { ... }
                }
            }

        }
    ) {...}

My topbar consists of an image and a PrimaryScrollableTabRow. The image needs to overlap with the status bar, but when the image is collapsed, the PrimaryScrollableTabRow needs to be displayed below the status bar. I don't know how to do this. I think this library could add an API to set a specific height at which it stops collapsing.

[flaringapp]

The easiest solution is to apply window insets padding to PrimaryScrollableTabRow:

PrimaryScrollableTabRow(
    modifier = Modifier
        .notCollapsible()
        .windowInsetsPadding(WindowInsets.statusBars.union(WindowInsets.displayCutout)),
        ...
)

However, it adds blank space above PrimaryScrollableTabRow. To fix that, I suggest using Modifier.layout on NetImage to make it overlap PrimaryScrollableTabRow:

val topInsets = WindowInsets.statusBars.union(WindowInsets.displayCutout)

NetImage(
    modifier = Modifier
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            layout(placeable.width, placeable.height - topInsets.getTop(this)) {
                placeable.place(0, 0)
            }
        }
        .clipToCollapse()
        .fillMaxWidth()
        .aspectRatio(1080f / 700f),
    model = "https://picsum.photos/1080/700?random=1",
)

PrimaryScrollableTabRow(
    modifier = Modifier
        .notCollapsible()
        .windowInsetsPadding(topInsets),
    ...
) { ... }

Ultimately, a correct solution would be not to use CollapsingTopBarColumn but render content directly inside topBar instead. It acts like a Box, so your image would go underneath, and PrimaryScrollableTabRow would overlap the image and define collapsed height as it's the smallest element. However, there is no builtin way to align elements inside CollapsingTopBarScope, in your case - align PrimaryScrollableTabRow to the bottom. Something I should add.

You can replicate this approach manually like this:

topBar = { topBarState ->
    NetImage(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1080f / 700f),
        model = "https://picsum.photos/1080/700?random=1",
    )

    val expandedHeight by remember {
        derivedStateOf { topBarState.layoutInfo.expandedHeight }
    }

    PrimaryScrollableTabRow(
        modifier = Modifier
            .parallax(1f)
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)
                layout(placeable.width, placeable.height) {
                    val offset = (expandedHeight - placeable.height).coerceAtLeast(0)
                    placeable.place(0, offset)
                }
            }
            .windowInsetsPadding(WindowInsets.statusBars.union(WindowInsets.displayCutout)),
        ...
    ) { ... }
}

Let me know if any of suggested solutions work for you. I'll think about adding more modifiers for placement customization.

[sceneren]

val topInsets = WindowInsets.statusBars.union(WindowInsets.displayCutout)

NetImage(
    modifier = Modifier
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            layout(placeable.width, placeable.height - topInsets.getTop(this)) {
                placeable.place(0, 0)
            }
        }
        .clipToCollapse()
        .fillMaxWidth()
        .aspectRatio(1080f / 700f),
    model = "https://picsum.photos/1080/700?random=1",
)

PrimaryScrollableTabRow(
    modifier = Modifier
        .notCollapsible()
        .windowInsetsPadding(topInsets),
    ...
) { ... }

Thank you for your help. This method perfectly meets my needs.

[flaringapp]

Hey @sceneren

In #63 I introduced align Modifier to CollapsingTopBarScope. You could try removing CollapsingTopBarColumn and put content directly inside topBar + put Modifier.align(Alignment.BottomStart) on PrimaryScrollableTabRow (with window insets also applied) + put Modifier.parallax(1f).

I'll release new version soon; or you can download library sources and test this out manually if you want