Hi, i am trying to get a a screen with 3 sections,...

# compose

[brabo-hi]

Hi, i am trying to get a a screen with 3 sections, top, body, bottom, using contraint layout.
Top and Bottom should be fix, and body a lazyColumn list

[Daniele Segato]

There's a rule here to keep the question shorts and go in detail in the thread, can you edit your question?

[Daniele Segato]

About your question i believe you need to fillMaxSize on the constraint layout if you want to do that.

Is there any particular reason you aren't using a Scaffold for this?

[Jan Bína]

You will need modifier = Modifier.fillMaxSize() on the constraint layout and height = Dimension.fillToConstraints in the constrainAs block of itemsRef. This is equivalent of layout_height="0dp" in xml. Since the default value is wrap content, your list now fills the whole screen and the last item is hidden under the bottom section.

Another thing is that you don't need constraint layout for this at all. Simple Column with .weight(1F) on items surface will be enough.

[brabo-hi]

@Composable
fun ContraintLayoutComponent() {
    ConstraintLayout {
        val (topRef, itemsRef, bottomRef) = createRefs()
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(topRef) { top.linkTo(<http://parent.top|parent.top>) }, color = Color.Magenta) {
            Text(text = "Top")
        }
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(itemsRef) {
                top.linkTo(topRef.bottom)
                bottom.linkTo(<http://bottomRef.top|bottomRef.top>)
            }, color = Color.Green) {
            LazyColumn{
                items(100) {
                    Text(text = "Body $it")
                }
            }
        }
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(bottomRef) { bottom.linkTo(parent.bottom) }, color = Color.Red) {
            Text(text = "Bottom")
        }
    }
}

On the preview i have body and bottom , however i am not getting the top. What am i missing?

[brabo-hi]

[brabo-hi]

@Jan Bína Column with wight(1f) is working, however i am not able to get it working using constraint layout even when i change on body FillMaxSize() and

height = Dimension.fillToConstraints

[brabo-hi]

@Composable
fun ContraintLayoutComponent() {
    ConstraintLayout {
        val (topRef, itemsRef, bottomBtn) = createRefs()
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(topRef) { top.linkTo(<http://parent.top|parent.top>) }
            , color = Color.Magenta) {
            Text(text = "Top")
        }
        Surface(modifier = Modifier
            .fillMaxSize()
            .constrainAs(itemsRef) {
                top.linkTo(topRef.bottom)
                bottom.linkTo(<http://bottomBtn.top|bottomBtn.top>)
                height = Dimension.fillToConstraints
            }, color = Color.Green) {
            LazyColumn{
                items(100) {
                    Text(text = "Body $it")
                }
            }
        }
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(bottomBtn) { bottom.linkTo(parent.bottom) }
            , color = Color.Red) {
            Text(text = "Bottom")
        }
    }
}

Here is the result

[Jan Bína]

The fillMaxSize should be on the constraint layout:

@Composable
fun ContraintLayoutComponent() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (topRef, itemsRef, bottomRef) = createRefs()
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(topRef) { top.linkTo(<http://parent.top|parent.top>) }, color = Color.Magenta) {
            Text(text = "Top")
        }
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(itemsRef) {
                top.linkTo(topRef.bottom)
                bottom.linkTo(<http://bottomRef.top|bottomRef.top>)
                height = Dimension.fillToConstraints
            }, color = Color.Green) {
            LazyColumn{
                items(100) {
                    Text(text = "Body $it")
                }
            }
        }
        Surface(modifier = Modifier
            .fillMaxWidth()
            .constrainAs(bottomRef) { bottom.linkTo(parent.bottom) }, color = Color.Red) {
            Text(text = "Bottom")
        }
    }
}

[brabo-hi]

@Jan Bína thanks it’s working now