height

fun Modifier.height(intrinsicSize: IntrinsicSize) =
    this then
        IntrinsicHeightElement(
            height = intrinsicSize,
            enforceIncoming = true,
            inspectorInfo =
                debugInspectorInfo {
                    name = "height"
                    properties["intrinsicSize"] = intrinsicSize
                },
        )

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.

Example usage for min intrinsic:

Example usage for max intrinsic:

fun Modifier.height(height: Dp) =
    this.then(
        SizeElement(
            minHeight = height,
            maxHeight = height,
            enforceIncoming = true,
            inspectorInfo =
                debugInspectorInfo {
                    name = "height"
                    value = height
                },
        )
    )

Declare the preferred height of the content to be exactly heightdp. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the height of the content regardless of the incoming constraints see Modifier.requiredHeight. See width or size to set other preferred dimensions. See widthIn, heightIn or sizeIn to set a preferred size range.

Code Examples

MatchParentDividerForAspectRatio

@Composable
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))
        }
    }
}

MatchParentDividerForText

@Composable
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(),
            )
        }
    }
}

SimpleHeightModifier

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