Jetpack Compose Constraint Layout not linking correctly

Question

I have a column that currently has the yellow circle inside and I want this column to occupy the space in the red square, so that the yellow circle is equally spaced between the green circle and the column at the end with gifts, raid and trade. I've linked the start and ends of the column to the respective columns and made it's width fill the constrained area, but as you can see the column and yellow circle is still in the top left. Can anyone see what im doing wrong?

    ConstraintLayout {

    val (card, columnStart, columnMiddle, columnEnd) = createRefs()

    Card(
        modifier = Modifier
            .height(180.dp)
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .constrainAs(card) {}
    ) {

        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(120.dp)
                .wrapContentWidth(Alignment.Start)
                .constrainAs(columnStart) {
                    top.linkTo(card.top)
                    bottom.linkTo(card.bottom)
                },
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                modifier = Modifier
                    .size(120.dp)
                    .padding(top = 4.dp, start = 4.dp)
                    .clip(CircleShape),
                painter = painterResource(R.drawable.pokepals_logo),
                contentDescription = null
            )
            Text(
                text = profile.trainerName,
                style = MaterialTheme.typography.subtitle1
            )
        }

        Column(
            modifier = Modifier

                .constrainAs(columnMiddle) {
                    top.linkTo(card.top)
                    bottom.linkTo(card.bottom)
                    start.linkTo(columnStart.end)
                    end.linkTo(columnEnd.start)
                    width = Dimension.fillToConstraints
                }
        ) {

            Box(modifier = Modifier.wrapContentSize()) {
                PokeRepYellowBackground()
            }

        }

        Column(
            modifier = Modifier
                .padding(end = 4.dp)
                .wrapContentHeight()
                .wrapContentWidth(Alignment.End)
                .constrainAs(columnEnd) {
                    top.linkTo(card.top)
                    bottom.linkTo(card.bottom)
                    end.linkTo(card.end)
                },
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        )

Answer 1

You can use something like:

ConstraintLayout {

    val (card, columnStart, columnMiddle, columnEnd) = createRefs()

    Card( //..
          Modifier.constrainAs(card) {}
    ) {

        ConstraintLayout {
            Column(
                modifier = Modifier
                    .constrainAs(columnStart) {
                      //...
                    },
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                //..
            }

            Column(
                modifier = Modifier
                    .constrainAs(columnMiddle) {
                        top.linkTo(card.top)
                        bottom.linkTo(card.bottom)
                        start.linkTo(columnStart.end)
                        end.linkTo(columnEnd.start)
                        width = Dimension.fillToConstraints
                    },
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                //..
            }

            Column(
                modifier = Modifier
                    //..
                    .constrainAs(columnEnd) {
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                        end.linkTo(parent.end)
                    },
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                //..
            }
        }
    }
}