Hi, I'm trying to create a custom layout that need...

# compose

[Shakil Karim]

Hi, I'm trying to create a custom layout that needs to match the design on the right, is there a way to measure a text height based on Text Size

[Shakil Karim]

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable() () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->

        val imageConstraints = Constraints.fixed(
            80.dp.toPx().toInt(),
            80.dp.toPx().toInt()
        )

        val width = constraints.maxWidth - ((imageConstraints.maxWidth * 2) + 200)

        val scoreConstraints = Constraints.fixed(
            width,
            30.dp.toPx().toInt()
        )


        val imagePlacable = measurables[0].measure(imageConstraints)
        val imagePlacable2 = measurables[1].measure(imageConstraints)
        val scorePlacalbe = measurables[2].measure(scoreConstraints)
        val locationPlacalbe = measurables[3].measure(scoreConstraints)
        val datePlacable = measurables[4].measure(scoreConstraints)

        layout(constraints.maxWidth, constraints.maxHeight) {

            val halfHeight = imagePlacable.height / 2
            val halfScreen = ((constraints.maxHeight / 2) - halfHeight)

            imagePlacable.place(x = 100 , y = halfScreen)
            imagePlacable2.place((constraints.maxWidth - imagePlacable.width) - 100,y = halfScreen)
            scorePlacalbe.place(100 + imagePlacable.width ,
                (constraints.maxHeight / 2) - (scoreConstraints.maxHeight / 2))
            locationPlacalbe.place(100 + imagePlacable.width ,
                (constraints.maxHeight / 2) - (scoreConstraints.maxHeight / 2) + 30.dp.toPx().toInt())
            datePlacable.place(100 + imagePlacable.width ,
                (constraints.maxHeight / 2) - (scoreConstraints.maxHeight / 2) - 30.dp.toPx().toInt())
        }
    }
}

[Shakil Karim]

fun DemoLayout() {

    Card(
        modifier = Modifier
                .fillMaxWidth()
            .height(200.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp),
        elevation = 8.dp,
        backgroundColor = MaterialTheme.colors.background,
    ) {

        CustomLayout(modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow)) {

            Spacer(
                modifier = Modifier
                    //.clip(CircleShape)
                    .background(Color.Red)

            )

            Spacer(
                modifier = Modifier
                    //.clip(CircleShape)
                    .background(Color.Green)
            )

            Text(
                modifier = Modifier
                    .background(Color.Cyan),
                    text = "2:2",
                    style = TextStyle(fontSize = 22.sp,textAlign = TextAlign.Center),
                    maxLines = 1
                )

            Text(
                modifier = Modifier
                    .background(Color.DarkGray),
                text = "Eden",
                style = TextStyle(fontSize = 18.sp,textAlign = TextAlign.Center),
                maxLines = 1
            )

            Text(
                modifier = Modifier
                    .background(Color.DarkGray),
                text = "22:10 - 22:33",
                style = TextStyle(fontSize = 16.sp,textAlign = TextAlign.Center),
                maxLines = 1
            )
        }

    }

}

[Cicero]

There are many strategies to know the size of the inner content, what I would recommend is to limit your text size using percentage. In the end you know, using this image reference, exactly how much space every entity should be occupying.

You can play around with fillWidth(percentage) for example.
I don’t believe trying to work with the text size would be the best angle to look into this puzzle

[Shakil Karim]

@Cicero Sorry, if I understand your point incorrectly you mean I need to add fillWidth(percentage) on Text Composable? I'm roughly calculating the width of space between two images, but here I'm hardcoding 30.dp for height which I want to avoid.

[Cicero]

I mean you should compose your view from the perspective of distributing your UI using percentages

[Cicero]

and the adapt the behavior of your text to fit into this percentages

[Cicero]

you’re gonna have a fillWidth for the outer box,
than you have this small component which is the teams shield which will be something like a fillWidth(0.3) or more, I don’t know

[Cicero]

What I mean is just don’t get stuck trying to find the size of the text

[Cicero]

your UI shouldn’t be dependent of the text size, the content should adapt properly to the amount of space you have

[Cicero]

you can do the other way around but you will have much more work

[Cicero]

you can use https://jorgecastillo.dev/jetpack-compose-withconstraints

[Cicero]

but man, this is a dark road to go trough. Try observing your issue from the perspective that you will provide the constraints and your content must adapt to it

[Shakil Karim]

Thank you for your time, I will try with the percentage approach tomorow.