Colton Idle

    Colton Idle

    11 months ago
    Trying to draw this fairly simple column in compose but failing. Code in thread.
    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%
    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%") } }
      }
    Result:
    My Issue is that I'm filling the parent vs matching the content.
    k

    Karan Sharma

    11 months ago
    @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")
            }
        }
    
    }
    }
    Try this !
    Colton Idle

    Colton Idle

    11 months ago
    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%
    k

    Karan Sharma

    11 months ago
    You can set size Modifier on Parent Column to have a fix height or width !
    Albert Chang

    Albert Chang

    11 months ago
    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

    Colton Idle

    11 months ago
    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

    Albert Chang

    11 months ago
    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

    Colton Idle

    11 months ago
    I'd want the height to keep expanding to be a 60/40 split.
    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

    Albert Chang

    11 months ago
    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

    Colton Idle

    11 months ago
    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.
    I also understand that custom layouts in compose are a lot "cheaper" though and so maybe I should embrace that.
    Albert Chang

    Albert Chang

    11 months ago
    I also have to say that this is really not a common need though.
    Colton Idle

    Colton Idle

    11 months ago
    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.
    How would you go about that?
    Albert Chang

    Albert Chang

    11 months ago
    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

    Colton Idle

    11 months ago
    Hm. Maybe I'm overthinking it.
    Albert Chang

    Albert Chang

    11 months ago
    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

    Colton Idle

    11 months ago
    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

    gildor

    11 months ago
    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