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

Reputation: 2253

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)
        })
   }
}

Upvotes: 10

Views: 8879

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363765

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
            }
      )

Upvotes: 48

Related Questions