https://kotlinlang.org logo
#compose
Title
# compose
p

Per Jansson

05/04/2023, 2:50 PM
Is it possible in Jetpack compose to allow a child composable to be bigger than it’s parent, just not show the overflowing part and still let the parent composable decide how much is shown? In this example, would it be possible for the inner blue box to actually render as 400dp but that the outer yellow box would not display the overflowing 200dp? Like in the web world with CSS you can use
overflow: hidden | clip
to achieve the same. In the example below both boxes will log that they are 200 in size, I would like the blue one to be 400 but only the top 200 would be visible.
Copy code
Box(
  modifier = Modifier
    .size(200.dp)
    .background(Color.Yellow)
    .onGloballyPositioned { coordinates ->
       Log.d("BoxSize", "OUTER Width: ${coordinates.size.width}, Height: ${coordinates.size.height}")
    }
) {
    Box(
      modifier = Modifier
        .fillMaxWidth()
        .height(400.dp)
        .background(Color.Blue)
        .onGloballyPositioned { coordinates ->
           Log.d("BoxSize", "INNER Width: ${coordinates.size.width}, Height: ${coordinates.size.height}")
        }
    )
}
1
z

Zach Klippenstein (he/him) [MOD]

05/04/2023, 3:09 PM
See the requiredSize modifier and friends
v

vide

05/04/2023, 3:09 PM
Yes, you can use the
wrapContentSize
modifier
r

romainguy

05/04/2023, 3:10 PM
And you can also enable clipping on the parent using
.graphicsLayer { clip = true }
z

Zach Klippenstein (he/him) [MOD]

05/04/2023, 3:10 PM
In general, a layout node can always measure itself to not satisfy the incoming constraints. When that happens, the layout system will report the constrained bounds to the parent, and center the naughty child. wrapContentSize lets you effectively change that default center behavior.
v

vide

05/04/2023, 3:11 PM
In this case you could use
.wrapContentHeight(unbounded = true).height(400.dp)
on the inner composable
And choose the alignment with
.wrapContentHeight(unbounded = true, align = ...)
❤️ 1
p

Per Jansson

05/04/2023, 3:49 PM
Yeah, that did the trick 👍.
1791 Views