:wave: Question with regard to getting match_paren...

# compose

[doubov]

👋 Question with regard to getting match_parent behavior for inner Composables. For example:

@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:

[doubov]

I was expecting left-most Box with yellow background to match the parent (Row) height (whose height is set to wrapContentHeight).

[doubov]

How do I modify this layout to get the match_parent behavior?

[V Badalyan]

i think you mistake in plus sign in Modifiets

[doubov]

What do you mean?

[V Badalyan]

you can't with mode plus fixrd with becouse it's different yype

[V Badalyan]

Modifier.fillMaxWidth() + Modifier.wrapContentHeight(),

[V Badalyan]

look to example

[V Badalyan]

https://developer.android.com/reference/kotlin/androidx/ui/core/Modifier.html

[doubov]

yeah, I’ve looked, but there’s no documentation about match_parent behavior

[doubov]

any idea what I’d have to do to get the match_parent behavior for the inner Box Composables?

[doubov]

Also, what makes you think that those `Modifier`s aren’t combinable?

[V Badalyan]

fiilwidth = match parent

[doubov]

Box(modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight(), backgroundColor = Color.Yellow)

[doubov]

that’s what I have for the inner Box , but it ends up taking up the whole height of the screen

[doubov]

I even removed

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 Badalyan]

Modifiers.one().two().three

[V Badalyan]

use dot!

[V Badalyan]

modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight()

->

modifier = Modifier.width(32.dp).fillMaxHeight()

[doubov]

That shouldn’t make a difference. Under the hood, those syntaxes result in the same code

[ppvi]

you are calling `fillMaxHeight`on the yellow box, why do you expect it to be shorter?

[Zach Klippenstein (he/him) [MOD]]

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)

[doubov]

Thanks for the replies. Yeah, IntrinsicSize.Max seems to do the trick. I was wary of using it since it is in Experimental state.

[Zach Klippenstein (he/him) [MOD]]

All of Compose is in the experimental state 😉

[Sean McQuillan [G]]

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.

[Sean McQuillan [G]]

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.

[Sean McQuillan [G]]

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.

[doubov]

Interesting, thanks for the info