Can anybody tell me what's wrong with the following component ? It should be made of two colors : a ...

# compose

[loloof64]

Can anybody tell me what's wrong with the following component ? It should be made of two colors : a purple background and a brown line at top. Instead, all I can see is a purple square.

@Composable
fun SimpleZone(modifier: Modifier) {
    val backgroundColor = Color(0xCAD63B60) // purple
    val cellColor = Color(0xFFFFCE9E) // brown
    
    Column(modifier = modifier.background(backgroundColor)) {
        Row(modifier = Modifier.fillMaxHeight(0.1f).background(cellColor)) {

        }
    }
}

@Preview
@Composable
fun SimpleZonePreview() {
    SimpleZone(modifier = Modifier.size(100.dp))
}

[Nate Ridderman]

All I see is brown, not purple. Is that what you meant? My guess is that fillMaxHeight doesn’t work because the height is already specified in the modifier (in this case inherited from the parent). If you “reset” this by adding
.wrapContentHeight before it, it resizes as you desire.

[Adam Powell]

nah, looks like you're missing a width for the row if it's currently empty

[Adam Powell]

e.g.

Column(Modifier.size(100.dp).background(Color.Blue)) {
  Row(Modifier.fillMaxHeight(0.1f).fillMaxWidth().background(Color.Red)) {
  }
}

[Adam Powell]

Column relaxes the minimum width constraint for children

[loloof64]

Yes @Adam Powell, you're right. It worked. Thank you. So I needed to set the width of the row to its maximum.

[Nate Ridderman]

cool, I learned something too 🙂

[Nate Ridderman]

@Adam Powell if you define the size as @loloof64 did and pass that modifier down to the Row, then fillMaxWidth() doesn’t work.

[Adam Powell]

depends on your definition of, "work" 🙂 if you do Modifier.size(100.dp).fillMaxWidth() then yes, the fillMaxWidth() is then a no-op. size sets both the min and max constraints to the same value, and fillMaxWidth sets the minimum width constraint to the maximum width constraint

[Adam Powell]

so there will be no observable effect

[Adam Powell]

all the size modifiers do is manipulate the min/max constraints

[Adam Powell]

fillMaxHeight(0.1f) for example, sets both the min and max height to 0.1f * incomingMaxHeight

[Nate Ridderman]

thank you, that’s very helpful