Good evening :wave: Got an interesting question ...
# compose
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:
Copy code
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
is inside a
and there is another child composable in this box that I want to apply an offset too, by doing some calculation using the
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
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!
Good morning! You can use the onSizeChanged modifier to detect the current and future sizes 👍🏽
Copy code
Modifier.onSizeChanged { size ->
        val itemHeight = with(density) {
            val height = size.height
You should use a custom layout instead of
. See this.
☝🏻 1
You could also just maybe write a custom
, which lets you write positioning logic in terms of sizes but without writing a whole custom layout:,androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.LayoutDirection)
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.
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
Unless I'm missing something...
The blue and red boxes at bottom are placeholders for a nav bar and a CTA that is pinned. Just FYI.
Also for more clarity, I'm using a NestedScrollConnection here
* update * using
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