Hello. Is is possible to set box height that we sc...

# compose

[Jasmin Fajkic]

Hello. Is is possible to set box height that we scale correctly on all devices ? Something like 50% of screen height?

[Stylianos Gakis]

Modifier.fillMaxHeight(0.5f) might be what you’re looking for.

Or potentially this

Column(Modifier.fillMaxSize()) {
  Box(Modifier.weight(1f)) {}
  Foo(Modifier.weight(1f))
}

if you’re looking for a column with an item that takes up half of the space

[Jonas]

We use something like this:

fun Modifier.fractionOfScreenHeight(fraction: Float = 0.5f) = composed {
    this.heightIn(max = LocalConfiguration.current.screenHeightDp.dp * fraction)
}

[Stylianos Gakis]

Interesting one Jonas. How do you have to call this on the call site to make it work? It’d still have to be specified with fillMaxSize() somewhere or something like that I suppose since you’re only specifying the max height, and not the min one, so it could also occupy less than that. You’re only setting the upper bound there.

Also in general I would simply imagine querying the LocalConfig to get the height in DP is not the typical use case. Since you usually have to consider available space, the status/navigation bars, other content and so on. What is your use case of the fractionOfScreenHeight modifier? Care to share an example or two?

[Jonas]

Sry for the late response…

just use it like any other modifier in your modifier chain.
yes we use it to specify a max height as we have a container which should grow if the user scales the font size of the device but should start to scroll if it reaches half the screen. you can exchange the heightIn with the height modifier if you want to have a fix height.

yes, typically you would take a parent height or something similar, but roughly half of the available space was enough for our current requirements.