https://kotlinlang.org logo
d

doubov

07/13/2020, 12:05 AM
👋 Question with regard to getting match_parent behavior for inner Composables. For example:
Copy code
@Composable
fun Greeting(name: String) {
    val state = state { TextFieldValue("Hello $name") }

    Row(modifier = Modifier.fillMaxWidth() + Modifier.wrapContentHeight()) {
        Box(modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight(), backgroundColor = Color.Yellow)
        Column(modifier = Modifier.weight(1f)) {
            TextField(
                modifier = Modifier.fillMaxWidth() + Modifier.wrapContentHeight(),
                value = state.value,
                onValueChange = {
                    state.value = it
                }
            )
            Text(
                text = "TextField text: ${state.value.text}",
                modifier = Modifier.padding(vertical = 8.dp) + Modifier.fillMaxWidth() + Modifier.wrapContentHeight()
            )
            Text(text = "Finish", modifier = Modifier.fillMaxWidth() + Modifier.wrapContentHeight())
        }
        Box(modifier = Modifier.width(32.dp), backgroundColor = Color.Yellow)
    }
}
Produces in my opinion, unexpected layout:
I was expecting left-most Box with yellow background to match the parent (Row) height (whose height is set to wrapContentHeight).
How do I modify this layout to get the match_parent behavior?
v

V Badalyan

07/13/2020, 12:08 AM
i think you mistake in plus sign in Modifiets
d

doubov

07/13/2020, 12:09 AM
What do you mean?
v

V Badalyan

07/13/2020, 12:09 AM
you can't with mode plus fixrd with becouse it's different yype
Copy code
Modifier.fillMaxWidth() + Modifier.wrapContentHeight(),
look to example
d

doubov

07/13/2020, 12:11 AM
yeah, I’ve looked, but there’s no documentation about match_parent behavior
any idea what I’d have to do to get the match_parent behavior for the inner
Box
Composables?
Also, what makes you think that those `Modifier`s aren’t combinable?
v

V Badalyan

07/13/2020, 12:21 AM
fiilwidth = match parent
d

doubov

07/13/2020, 12:23 AM
Copy code
Box(modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight(), backgroundColor = Color.Yellow)
that’s what I have for the inner
Box
, but it ends up taking up the whole height of the screen
I even removed
Copy code
Modifier.fillMaxWidth()
from the parent
Row
just in case those Modifiers aren’t compatible as your said, but it’s still the same result
v

V Badalyan

07/13/2020, 12:59 AM
Modifiers.one().two().three
use dot!
Copy code
modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight()
->
Copy code
modifier = Modifier.width(32.dp).fillMaxHeight()
d

doubov

07/13/2020, 2:16 AM
That shouldn’t make a difference. Under the hood, those syntaxes result in the same code
p

ppvi

07/13/2020, 10:49 AM
you are calling `fillMaxHeight`on the yellow box, why do you expect it to be shorter?
z

Zach Klippenstein (he/him) [MOD]

07/13/2020, 1:28 PM
Does it work if you use the
preferredHeight(IntrinsicSize.Max)
on your Row, as in the sample in the kdoc: https://developer.android.com/reference/kotlin/androidx/ui/layout/package-summary#(androidx.ui.core.Modifier).preferredHeight(androidx.ui.layout.IntrinsicSize)
d

doubov

07/13/2020, 4:59 PM
Thanks for the replies. Yeah,
IntrinsicSize.Max
seems to do the trick. I was wary of using it since it is in Experimental state.
z

Zach Klippenstein (he/him) [MOD]

07/13/2020, 4:59 PM
All of Compose is in the experimental state 😉
s

Sean McQuillan [G]

07/14/2020, 6:20 PM
Catching up here – fillMaxHeight will grow the composable to whatever the maximum constraint allowed is. In this case that's the entire screen. It's only keyed off the constraints from the parent so it's not able to respond to child or sibling sizing. IntrinsicSize is the correct solution if you want to fill only the size needed to layout the parent for other children.
It helped me build a mental model for compose layout to realize that it's intended to be single pass and it works by modifying the (min, max) constraints passed to children. That's why
fillMaxHeight
works this way – it's filling the maximum allowed height by the parent. The parent specifying
wrapContentHeight
does not add a second layout pass to resize it when its children are measured, but simply changes the min constraint to 0.
🙏 1
This takes some getting used to coming from Android views. The main advantage you get is that there's no way to express non-performant O(2^n) UIs using
wrap_content
or
layout_weight
in Compose.
d

doubov

07/15/2020, 4:13 AM
Interesting, thanks for the info
2 Views