Good evening :wave: Got an interesting question ...

# compose

[OG]

Good evening 👋

Got an interesting question (I think 🤔).. I'm trying to get the resolved width/height of a composable in px, which has a modifier using aspect ratio. Something like:

Image(modifier = Modifier.fillMaxWidth.aspectRatio(1.50f)

And I want to know the resolved height in px, and use that as an offset for another child composable. For simplicity, imagine this Image is inside a Box and there is another child composable in this box that I want to apply an offset too, by doing some calculation using the Image height. (This problem would be easy if the height was hardcoded like 200.dp, but I have to use aspect ratio)

I'm guessing the only way to do this is using the Layout composable where I would need to measure and layout everything manually... But wondering if there's a more simpler approach that I'm just overlooking. Thanks!

[Zoltan Demant]

Good morning! You can use the onSizeChanged modifier to detect the current and future sizes 👍🏽

Modifier.onSizeChanged { size ->
        val itemHeight = with(density) {
            val height = size.height
            height.toDp()
        }
    }

[Albert Chang]

You should use a custom layout instead of Modifier.onSizeChanged(). See this.

[Zach Klippenstein (he/him) [MOD]]

You could also just maybe write a custom Alignment, which lets you write positioning logic in terms of sizes but without writing a whole custom layout: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#align(androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.LayoutDirection)

[OG]

demo.mp4

[OG]

Here's a demo to show what im trying to really do. I'm building a custom collapsible toolbar so that when you scroll, the gray box (which is an image using the aspectRatio I mentioned in the original post, will collapse as you scroll to a minimum height. And the play button pins when that minimum offset is reached as well.

[OG]

I figured custom layout was the way to go... Was just thinking maybe I could avoid that complexity and get away with a built in solution somehow.

@Zach Klippenstein (he/him) [MOD] I considered that too, but it won't work given I need to know the actual calculated size of the image box so that I can appropriately calculate the scrolling offset

[OG]

Unless I'm missing something...

[OG]

The blue and red boxes at bottom are placeholders for a nav bar and a CTA that is pinned. Just FYI.

[OG]

Also for more clarity, I'm using a NestedScrollConnection here

[OG]

* update * using BoxWithConstraints gets the job done, since if we know the full width of the screen we can calculate the height right away using the same aspect ratio passed to the Image