Jetpack Compose: filling max width or height
Tags: android, jetpackcompose, kotlin
Published: 2021-10-31 19:47:09

---
title: Jetpack Compose: filling max width or height
date: 2021-10-23 19:52:44 UTC
published: true
tags: Android,JetpackCompose,Kotlin
canonical_url: https://www.rockandnull.com/jetpack-compose-fillmaxheight-fillmaxwidth/
---

 ![Jetpack Compose: filling max width or height](https://images.unsplash.com/photo-1611077544775-6e72542a206f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDZ8fHJ1bGVyfGVufDB8fHx8MTYzNTAxODcxNQ&ixlib=rb-1.2.1&q=80&w=2000)

One interesting thing about Jetpack Compose is this: it only measures children in layouts **once**. Measuring children in layouts twice will throw a runtime exception according to the [documentation](https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements).

I guess this helps with quickly rendering things on the screen. But it has some additional consequences: if you have a layout that depends on dynamic width/height how do you get the final width/height after the content is set?

Let me give you an example. You want a vertical filled line next to 2 vertical texts. Easy right? You just use a `Row`, a `Column` and a `Box` like this (check this out for the [basic layouts](https://dev.to/mavris/jetpack-compose-intro-basic-layouts-1e18-temp-slug-5246852)):

```
@Composable
fun content() {
    return Row {
        Box(
            modifier = Modifier
                .width(8.dp)
                .fillMaxHeight()
                .background(Color.Red)
        )
        Column {
            Text("Hello")
            Text("World")
        }
    }
}
```

![Jetpack Compose: filling max width or height](https://www.rockandnull.com/content/images/2021/10/Screenshot-2021-10-23-at-15.06.36.png)<figcaption>The <code>Box</code> height is too long in this case</figcaption>

Why is this so long? We explicitly asked for `fillMaxHeight()` meaning the max combined height of the 2 `Text` composables.

As explained in the intro, compose measures the `Row` children individually only once, and at the time of drawing the `Box` it doesn't know the max available height of the 2 `Text` composables.

This can be fixed by adding `height(IntrinsicSize.Min)` to the `Row` parent composable:

```
@Composable
fun content() {
    return Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
    ) {
        Box(
            modifier = Modifier
                .width(8.dp)
                .fillMaxHeight()
                .background(Color.Red)
        )
        Column {
            Text("Hello")
            Text("World")
        }
    }
}
```

![Jetpack Compose: filling max width or height](https://www.rockandnull.com/content/images/2021/10/Screenshot-2021-10-23-at-20.31.31.png)<figcaption><code>Box</code> height is wrapping the 2 <code>Text</code> composables</figcaption>

This modifier forces the `Row` children to use their minimum intrinsic size. When measuring is taking place, now Compose has enough info to calculate  `fillMaxHeight()` for the `Box`.

Hopefully, by now you have figured out why Compose is laying your composables with too long heights (or no height at all if trying to use `fillMaxHeight` inside a `LazyList`).

Happy coding!