Issue with ConstraintLayout in Jetpack compose

Question

I am trying to setup a constraint layout with appbar at top, list in middle and some xml resource at bottom using jetpack compose. below is my code

ConstraintLayout(
            modifier = Modifier
                .fillMaxWidth()

        ){
            val (appbar, listView, btnBackHome) = createRefs()

            TopAppBar(
                modifier = Modifier
                    .constrainAs(appbar){
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                    },
                title = { Text(text = "My Custom AppBar") }
            )

            LazyColumn(
                modifier = Modifier
                    .constrainAs(listView) {
                        top.linkTo(appbar.bottom)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        bottom.linkTo(btnBackHome.top)
                    }
                    .fillMaxWidth()
                //.fillMaxHeight()
            ) {
                items(listOfPersons.value) { item ->
                    MySimpleListItem(itemViewPerson = item)
                }
            }

            AndroidViewBinding(
                DummyResourceFileBinding::inflate,
                modifier = Modifier
                    .constrainAs(btnBackHome) {
                        bottom.linkTo(parent.bottom)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                    }
            ) {
                btnBackHomeNormalView.setOnClickListener {
                    Toast.makeText(context, "click me", Toast.LENGTH_SHORT).show()
                }

                context.supportFragmentManager.beginTransaction()
                    .replace(R.id.fragmentView, DummyPlaceHolderFragment.newInstance("", ""))
                    .commit()
            }
        }

but there seems to be some issue with list constraints. its not properly setting up, even if i have used both top to bottom of appBar and bottom to top of btnBackHome.

when i remove one of constraints either top or bottom, and keep only one like

LazyColumn(
                modifier = Modifier
                    .constrainAs(listView) {
                        top.linkTo(appbar.bottom)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                       
                    }
                    .fillMaxWidth()
                //.fillMaxHeight()
            ) {
                items(listOfPersons.value) { item ->
                    MySimpleListItem(itemViewPerson = item)
                }
            }

then the specified constrain works, but still i need to set both top and bottom. Also, i have tried setting both top and bottom with height being zero, but that makes the list taking 0 height and it seems to ignore constraints.

Answer 1

Move the TopAppBar in a Scaffold .
Also you can use the bottomBar in the Scaffold to display the buttons.

Something like:

Scaffold(
    topBar = {
        TopAppBar( title= {Text(text = "My Custom AppBar")})
    },
    bottomBar = {
        Row(modifier = Modifier.fillMaxWidth(),
           horizontalArrangement =  Arrangement.Center) {
            //Buttons...
        }
    }
) { innerPadding ->
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .padding(innerPadding)

    ) {
        val (listView) = createRefs()
        LazyColumn(
            modifier = Modifier
                .constrainAs(listView) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(btnBackHome.top)
                }
                .fillMaxWidth()
        ) {
            items(itemsList) { item ->
                Text("item")
            }
        }
        //....
    }
}

As alternative for the buttons you can use them in the ConstraintLayout but in this case you have to apply height = Dimension.fillToConstraints as constrain in the LazyColumn. Something like:

   LazyColumn(
        modifier = Modifier
            .constrainAs(listView) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(btnBackHome.top)
                height = Dimension.fillToConstraints
            }
            .fillMaxWidth()
    )