Trying to draw this fairly simple column in compose but failing. Code in thread.

# compose

[Colton Idle]

Trying to draw this fairly simple column in compose but failing. Code in thread.

[Colton Idle]

This image shows a little better what I'm trying to build. i.e. The entire box is "wrap content" but the top section will always take 60% and the bottom should always take 40%

[Colton Idle]

Column(
      modifier = Modifier.padding(16.dp).width(148.dp).border(width = 1.dp, color = Color.White)) {
    Box(modifier = Modifier.weight(.60f)) { Column() { Text(text = "Top 60%") } }

    Box(modifier = Modifier.weight(.40f)) { Column { Text(text = "Bottom 40%") } }
  }

[Colton Idle]

Result:

[Colton Idle]

My Issue is that I'm filling the parent vs matching the content.

[Karan Sharma]

@Composable
fun DemoScreen() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(.6f)
                .background(color = Color.Green)
        ) {
            Text(text = "60")
        }
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(.4f)
                .background(color = Color.Blue)
        ) {
            Text(text = "40")
        }
    }

}

}

[Karan Sharma]

Try this !

[Karan Sharma]

[Colton Idle]

That takes up the whole screen, which is what my code does. I want it to wrap content but always keep the constraint that the top section is 60 percent, and the bottom is 40%

[Karan Sharma]

You can set size Modifier on Parent Column to have a fix height or width !

[Albert Chang]

Where would the height of the column come from? You want the children's sizes to depend on the parent and the parent's size to depend on the children at the same time, which is impossible.

[Colton Idle]

Yeah. I want the columns height to be equal to the content that inside of it. I would just use a hardcoded height, but that breaks when the user increases their font size.

[Albert Chang]

To solve this you need to first clarify what you need. What if the the wrap content heights of the two text boxes aren't 6:4?

[Colton Idle]

I'd want the height to keep expanding to be a 60/40 split.

[Colton Idle]

Maybe what I really want is to have a set aspect ratio?

Box(
    modifier =
        Modifier.padding(16.dp)
            .aspectRatio(2 / 3F)
            .border(width = 1.dp, color = Color.White)) {

But even that box by itself still expands to take up the full amount of space. 🤔

[Albert Chang]

You can use a custom layout to achieve that:

Layout(content = {
    Text(text = "Top 60%")
    Text(text = "Bottom 40%")
}) { measurables, constraints ->
    val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
    val top = measurables[0].measure(looseConstraints)
    val bottom = measurables[1].measure(looseConstraints)
    val height = max(top.height / .6f, bottom.height / .4f).roundToInt()
    layout(constraints.maxWidth, height) {
        top.placeRelative(0, 0)
        bottom.placeRelative(0, (height * .6f).roundToInt())
    }
}

[Colton Idle]

Thanks. I do have to say that I'm a bit confused that this can't be done with all of the tools available in compose already.

[Colton Idle]

I also understand that custom layouts in compose are a lot "cheaper" though and so maybe I should embrace that.

[Albert Chang]

I also have to say that this is really not a common need though.

[Colton Idle]

Maybe I'm going about this wrong. Basically my designer said the top 60 percent should be an image, and the bottom 40 percent should be space for additoinal content. So we have something that looks like these airbnb cards, except the bottom has a few lines of text. As that text grows (because a user has increased font size) then the card should accomodate it.

[Colton Idle]

How would you go about that?

[Albert Chang]

I'm saying that the 6:4 separation is uncommon. I think usually you just add some padding to the text and use wrap content height.

[Colton Idle]

Hm. Maybe I'm overthinking it.

[Albert Chang]

I don't think I fully understand what your designer wants. Let's say that the image height is 6 and the text height is 2, and we make text area height 4, no problem. But if the text height is 8, should you make the image height 12 to maintain ratio, or just increase text area height without changing the image height?

[Colton Idle]

True. Yeah, I guess I don't have clarity on that either. Was just told to make it 60 percent and 40 percent, and to make sure the box can accomadate increased text size.

[gildor]

It looks that if goal is to support larger text you should just allow flexible size for text which will cover image, rather than keep ratio, otherwise it will look pretty strange if one of those cards will be bigger