Jetpack Compose Constraint Layout constrains not linking

Question

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"

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

Add `top.linkTo(parent.top)` to make `text1` stick to the top of the screen and `top.linkTo(text1.bottom)` for `list` to be below `text1` — Justin, Mar 18 '21 at 20:41
this would make the list below text1, I need the list above text1 — alfietap, Mar 18 '21 at 20:49
for `list` -- `top.linkTo(parent.top)` and for `text1` -- `top.linkText(link.bottom)` — Justin, Mar 18 '21 at 20:54

score 41 · Accepted Answer · answered Mar 18 '21 at 20:53

41

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

answered Mar 18 '21 at 20:53

Gabriele Mariotti

320,139
94
887
841

1

Works perfectly! – alfietap Mar 18 '21 at 20:57
6

I think that Dimension.fillToConstraints should be the default value to this attribute... Because is the default behavior of the ConstraintLayout on view system. – Renascienza Aug 27 '21 at 23:46
I honestly will never understand why google makes everything so complicated and and unintuitive – Farid Feb 06 '23 at 13:52
Missing `height = Dimension.fillToConstraints` was my issue. Thanks! – Aerim Feb 09 '23 at 17:58
@Renascienza it's not default value. You set `wrap_content` or `0dp` (Dimension.fillToConstraints) in view system for height or width, the same behavior is here – user924 Apr 11 '23 at 20:22

Jetpack Compose Constraint Layout constrains not linking

1 Answers1

Linked