androidandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-layoutandroid-compose-layout

Jetpack Compose Constraint Layout constrains not linking


I'm using constrainAs with Jetpack Compose to constrain a list of wifi options to the top of the parent and then to the bottom of a text view. As seen from the photo my list isn't being constrained to the top of the parent or to the textview below it, and it is even being pushed off the screen upwards?

For reference 'list' is the list of wifi options, and 'text1' is the textview that starts with "Select your wifi"

enter image description here

@Composable
fun ScanWifiScreen(wifiList: List<WifiOption>, onClick: (WifiOption) -> Unit) {
ConstraintLayout(
    modifier = Modifier
        .fillMaxSize()
        .background(colorResource(id = R.color.background))
) {

    val (list, text1, text2, progressIndicator) = createRefs()

    WifiList(
        wifiOptions = wifiList,
        onClick = onClick,
        modifier = Modifier
            .constrainAs(list) {
                top.linkTo(parent.top, margin = 8.dp)
                bottom.linkTo(text1.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
            .background(colorResource(id = R.color.background))
            .fillMaxHeight())

    Text(
        text = stringResource(id = R.string.select_wifi),
        modifier = Modifier
            .wrapContentSize()
            .padding(bottom = 16.dp)
            .constrainAs(text1) {
                bottom.linkTo(text2.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
        style = TextStyle(
            fontFamily = FontFamily(Font(R.font.quicksand_regular)),
            fontSize = 20.sp,
            color = colorResource(id = R.color.main_text),
            letterSpacing = 0.22.sp,
            textAlign = TextAlign.Center,
            lineHeight = 32.sp
        )
    )
    Text(
        text = stringResource(id = R.string.cant_see_network),
        modifier = Modifier
            .wrapContentSize()
            .padding(bottom = 32.dp)
            .constrainAs(text2) {
                bottom.linkTo(progressIndicator.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
        style = TextStyle(
            fontFamily = FontFamily(Font(R.font.quicksand_regular)),
            fontSize = 16.sp,
            color = colorResource(id = R.color.sub_text),
            letterSpacing = 0.18.sp,
            textAlign = TextAlign.Center,
            lineHeight = 24.sp
        )
    )

    ProgressIndicator2(
        progression = 3,
        modifier = Modifier.constrainAs(progressIndicator) {
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        })
   }
}

Solution

  • In your List remove the .fillMaxHeight() modifier and add the constraint height = Dimension.fillToConstraints

     WifiList(
         //....
         modifier = Modifier
                .constrainAs(list) {
                    top.linkTo(parent.top, margin = 8.dp)
                    bottom.linkTo(text1.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    height = Dimension.fillToConstraints
                }
          )