A modern programming language that makes developers happier.

kotlinlang

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 :smile:

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|https://m3.material.io/components/top-app-bar/guidelines>

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

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 :smile:

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

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

&gt; It did work, I used a Box and then placed an image back and then LargeTopAppBar on top. And syncing states from the scrollingBehaviour :slightly_smiling_face:
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 :man-shrugging: 

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

I expect Google to follow their own guidelines :stuck_out_tongue:

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

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