A modern programming language that makes developers happier.

kotlinlang

1610188919956.jpg

Hi, what you see are 2 Composables
1. Conversation - LazyColumn representing messages (I used modifier .fillMaxSize() to fill all the rest of screen)
2. UserInputBar - multiline Text Field surrounded by Surface that wraps around this text field so it increases it's size when text input goes multiline
I connected these pieces with use of ConstraintLayout. Bottom of Conversation composable is constrained to top of UserInputBar, but it looks like it's actually constrained to middle of UserInputBar so composables overlap themselves. Does anyone know how repair such behaviour?

```ConstraintLayout (
        modifier = Modifier
                .fillMaxSize()
                .background(color = MaterialTheme.colors.background)
) {
    val (conversation, userInputBar) = createRefs()

    UserInputBar(modifier = Modifier.constrainAs(userInputBar){
        bottom.linkTo(parent.bottom)
        linkTo(start = parent.start, end = parent.end)
    }, onSend = viewModel::onSend)

    Conversation(
            list = viewModel.messages,
            modifier = Modifier.constrainAs(conversation) {
                top.linkTo(<http://parent.top|parent.top>)
                bottom.linkTo(<http://userInputBar.top|userInputBar.top>, margin = 100.dp)
                linkTo(start = parent.start, end = parent.end)
    })
}```
Here is the declaration of ConstraintLayout container

Conversation.kt

UserInputBar.kt

Oh, forgot to mention, added it after I wrote here just to continue with job, after removing this margin Conversation and UserInputBar overlap themselves

Hmm, the `fillMaxSize()` in `Conversation()` is quite suspicious. Try without it. (We shouldn't be adding (non-preferred) size modifiers when a modifier is passed as a parameter)

So if I won't specify the size it will just fit the constraints?

It should. I'm not currently in a position to test this.

Just tested. It centers the Conversation verticaly and expands it's size as items are added. In XML you just passed "0dp" in size and it fullfiled the constraints. Can't find any information about such behaviour in Compose.

Oh my god, after like 2 hours of research got it finally. Found an information about it in this Codelab:
<https://developer.android.com/codelabs/jetpack-compose-layouts#8>
There are some dimenstions modifier when specifying constraints. Inside ConstrainScope lambda you pass with Modifier.constrainAs(...) {} you can specify dimensions behaviour. In my case I just needed to add:

`height = Dimension.fillToConstraints`
Inside the ConstrainScope lambda.

+ 3hours searching.
<@UJBPFB3SN> maybe it could be made more prominent in the documentation