Intrinsic Measurements In Jetpack Compose.

Photo by Diana Polekhina on Unsplash

In this article we will be talking about intrinsic measurements in Jetpack Compose.

Let’s breakdown both the term intrinsic & measurements .

Measurements

In the context of Jetpack Compose and other layout systems, “measure” refers to the process of determining how much space a Child UI element (e.g., a composable) should occupy within a Parent layout.

Intrinsic

Intrinsic , lets get some information about the child composable functions before measuring them.

However there are times when you need some information about the children before they rendered on the UI.

It is of two types :-

• (min|max)IntrinsicWidth — it will calculate the minimum and maximum width of child composable function.
• (min|max)IntrinsicHeight — it will calculate the minimum and maximum height of child composable function.

Suppose I want to make above thing in jetpack compose , so for that we will use two text composable functions separated by divider and In case of divider width will be 1.dp that’s fine but height will be any random number. But when the size of Text1 & Text2 increases , divider will look very weird.

To get rid from this situation , we will measured/calculate the minimum height of child composable function (i,e, Text1, Text2, divider) before it’s render on the ui with the help of Intrinsic.

@Composable
fun IntrinsicMinHeight() {

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Center) {
        Row(
            modifier = Modifier
                .padding(horizontal = 20.dp)
                .height(IntrinsicSize.Min)
        ) {
            Text(
                text = "Text 1", modifier = Modifier
                    .weight(1f)
                    .wrapContentWidth(Alignment.Start)
            )
            Divider(
                modifier = Modifier
                    .width(1.dp)
                    .fillMaxHeight(),
                color = Color.Red
            )
            Text(
                text = "Text 2", modifier = Modifier
                    .weight(1f)
                    .wrapContentWidth(End)
            )
        }
    }

}

As you can see in the above code , In the Row composable function , we have given the height IntrinsicSize.Min to calculate the minimum height of child composable function.

And In the divider composable function , width is 1 dp and height is fillMaxWidth , Now it will occupy the full height of Parent which is wrapContent .

If we don’t use IntrinsicSize.Min then it will looks like this

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Center) {
    Column(
        modifier = Modifier
            .width(IntrinsicSize.Min),
    ) {
        Text(
            text = "Text13i0494893"
        )
        Divider(
            modifier = Modifier
                .padding(vertical = 15.dp)
                .height(1.dp)
                .fillMaxWidth(),
            color = Color.Red
        )
        Text(
            text = "Text2",
        )
    }
}

In the same way , we can give IntrinsicSize.min to the width.

That’s all for today my friends , Hope you enjoyed and learnt something new :)