Is there a uhm correct way today to use expand/collapse in material 3 compose, with an image inside ...

# compose

[Joel Denke]

Is there a uhm correct way today to use expand/collapse in material 3 compose, with an image inside it and not only text?
I tested just add the image inside the text/title content, but it doesnt calculate the height then and doing hardcoded measured size of each row have to be 72dp or something like that in large vs small top bars. Any ideas? I would like to not introduce a new library for that simple thing, as I already having my custom top bar 😄

[Chrimaeon]

Material 3 Topbar do not engage having images inside of it so you’d have to use a custom implementation.
https://m3.material.io/components/top-app-bar/guidelines

[Joel Denke]

It did work, I used a Box and then placed an image back and then LargeTopAppBar on top. And syncing states from the scrollingBehaviour 🙂

[Joel Denke]

I dont ever want to do a custom implementation again, get all nested scrolls, animation and draggable on top of the content vs nested scroller from LazyColumn is insanity. I tried in the past, never want that road again 😄

[Joel Denke]

However would be nice if Google allowed us to specify the height of top bars 😄

[Joel Denke]

val density = LocalDensity.current
            val height by remember {
                derivedStateOf {
                    with(density) {
                        val offsetLimit = variant.scrollBehavior?.state?.heightOffsetLimit?.absoluteValue?.toDp() ?: 0.dp
                        val fraction = 1f - (variant.scrollBehavior?.state?.collapsedFraction ?: 0f)
                        64.dp + (offsetLimit) * fraction
                    }
                }
            }
            Box(
                modifier = modifier.fillMaxWidth()
            ) {
                Box(Modifier
                    .fillMaxWidth()
                    .height(height)
                ) {
                    variant.imageContent()
                }
                if (variant.size == TopBarSize.LARGE) {
                    LargeTopAppBar(
                        title = title,
                        colors = variant.colors,
                        scrollBehavior = variant.scrollBehavior,
                        navigationIcon = navigationIcon,
                        actions = actions
                    )
                } else {
                    TopAppBar(
                        title = title,
                        colors = variant.colors,
                        scrollBehavior = variant.scrollBehavior,
                        navigationIcon = navigationIcon,
                        actions = actions
                    )
                }
            }

[Chrimaeon]

It did work, I used a Box and then placed an image back and then LargeTopAppBar on top. And syncing states from the scrollingBehaviour 🙂

Of course it works, it’s just a composable. But it does not mean that it should work like you expect it to.
Just don’t use a material 3 top bar if you want other behavior 🤷‍♂️

[Joel Denke]

Well material 3 even has it in their guidelines, but sure 😛 So annoying, so still not a nice way of doing this with Googles code 😄

[Joel Denke]

I expect Google to follow their own guidelines 😛

[Chrimaeon]

No there is nothing like having images in the top bar. Check the link I posted above.

[Joel Denke]

Odd, ah well semi solved it at least so kind a ok solution.