New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation Layout

height

Common

Declare the preferred height of the content to be the same as the min or max intrinsic height of the content. The incoming measurement [Constraints] may override this value, forcing the content to be either smaller or larger.

See [width] for other options of sizing to intrinsic width. Also see [height] and [heightIn] for other options to set the preferred height.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.7.0-beta04")
}

Overloads

@Stable
fun Modifier.height(intrinsicSize: IntrinsicSize)
@Stable
fun Modifier.height(height: Dp)

Code Examples

MatchParentDividerForText

@Composable
@Sampled
fun MatchParentDividerForText() {
    // Builds a layout containing two pieces of text separated by a divider, where the divider
    // is sized according to the height of the longest text.
    //
    // Here height min intrinsic is adding a height premeasurement pass for the Row,
    // whose minimum intrinsic height will correspond to the height of the largest Text. Then
    // height min intrinsic will measure the Row with tight height, the same as the
    // premeasured minimum intrinsic height, which due to fillMaxHeight will force the Texts and
    // the divider to use the same height.
    Box {
        Row(Modifier.height(IntrinsicSize.Min)) {
            Text(
                text = "This is a really short text",
                modifier = Modifier.weight(1f).fillMaxHeight()
            )
            Box(Modifier.width(1.dp).fillMaxHeight().background(Color.Black))
            Text(
                text = "This is a much much much much much much much much much much" +
                    " much much much much much much longer text",
                modifier = Modifier.weight(1f).fillMaxHeight()
            )
        }
    }
}

MatchParentDividerForAspectRatio

@Composable
@Sampled
fun MatchParentDividerForAspectRatio() {
    // Builds a layout containing two aspectRatios separated by a divider, where the divider
    // is sized according to the height of the taller aspectRatio.
    //
    // Here height max intrinsic is adding a height premeasurement pass for the
    // Row, whose maximum intrinsic height will correspond to the height of the taller
    // aspectRatio. Then height max intrinsic will measure the Row with tight height,
    // the same as the premeasured maximum intrinsic height, which due to fillMaxHeight modifier
    // will force the aspectRatios and the divider to use the same height.
    //
    Box {
        Row(Modifier.height(IntrinsicSize.Max)) {
            val modifier = Modifier.fillMaxHeight().weight(1f)
            Box(modifier.aspectRatio(2f).background(Color.Gray))
            Box(Modifier.width(1.dp).fillMaxHeight().background(Color.Black))
            Box(modifier.aspectRatio(1f).background(Color.Blue))
        }
    }
}

SimpleHeightModifier

@Composable
@Sampled
fun SimpleHeightModifier() {
    Box {
        Box(Modifier.height(100.dp).aspectRatio(1f).background(Color.Blue))
    }
}