https://kotlinlang.org logo
#compose
Title
# compose
b

buszi0809

01/09/2021, 10:54 AM
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?
d

Dominaezzz

01/09/2021, 12:45 PM
Code?
b

buszi0809

01/09/2021, 2:07 PM
Copy code
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
And here are the components
d

Dominaezzz

01/09/2021, 2:16 PM
What's the
margin
for?
b

buszi0809

01/09/2021, 2:17 PM
Oh, forgot to mention, added it after I wrote here just to continue with job, after removing this margin Conversation and UserInputBar overlap themselves
d

Dominaezzz

01/09/2021, 2:22 PM
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)
b

buszi0809

01/09/2021, 2:28 PM
So if I won't specify the size it will just fit the constraints?
d

Dominaezzz

01/09/2021, 2:29 PM
It should. I'm not currently in a position to test this.
b

buszi0809

01/09/2021, 2:42 PM
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.
d

Dominaezzz

01/09/2021, 3:00 PM
Nice
b

Bino

07/16/2021, 7:31 AM
+ 3hours searching. @Ian Lake maybe it could be made more prominent in the documentation
2 Views