```ConstraintLayout { val (imageRef: Constrain...

# compose

[Socheat KHAUV]

ConstraintLayout {
    val (imageRef: ConstrainedLayoutReference,
        text1Ref: ConstrainedLayoutReference,
        text2Ref: ConstrainedLayoutReference,
        text3Ref: ConstrainedLayoutReference) = createRefs()
    Image(
        asset = imageResource(id = R.drawable.hq720),
        modifier = Modifier.constrainAs(
            imageRef
        ) {
            top.linkTo(anchor = parent.top, margin = 0.dp)
            start.linkTo(anchor = parent.start, margin = 0.dp)
        } then Modifier.preferredWidth(100.dp)
    )
    Text(
        text = "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30",
        maxLines = 2,
        overflow = TextOverflow.Ellipsis,
        style = MaterialTheme.typography.subtitle1.copy(fontSize = 12.sp),
        color = Color.White,
        modifier = Modifier.constrainAs(
            text1Ref
        ) {
            start.linkTo(anchor = imageRef.end, margin = 0.dp)
            end.linkTo(anchor = parent.end, margin = 0.dp)
            top.linkTo(anchor = parent.top, margin = 0.dp)
        }
    )
    Text(
        text = "Simply Nailogica!",
        style = MaterialTheme.typography.caption.copy(fontSize = 7.sp),
        color = Color.White,
        modifier = Modifier.constrainAs(
            text2Ref
        ) {
            start.linkTo(anchor = imageRef.end, margin = 0.dp)
            end.linkTo(anchor = parent.end, margin = 0.dp)
            top.linkTo(anchor = text1Ref.bottom, margin = 0.dp)
        }
    )
    Text(
        text = "2 views 31/08/2020 * Stream",
        style = MaterialTheme.typography.caption.copy(fontSize = 6.sp),
        color = Color.White,
        modifier = Modifier.constrainAs(
            text3Ref
        ) {
            start.linkTo(imageRef.end)
            end.linkTo(parent.end)
            bottom.linkTo(imageRef.bottom)
        }
    )
}

[Socheat KHAUV]

I am not sure why, text 1, text 2, and text 3 have a center alignment, and its width look not correct also.

[tieskedh]

@Socheat KHAUV the bias of the constraintlayout is centered (0.5F) by default.
To change the bias use`linkTo(imageRef.end, parent.end, bias = 0F)`.

[Socheat KHAUV]

@tieskedh - Thanks you - it is now alight from the start. but still somethings wrong with its end or its relatively available width 🙂. it is properly a constraint layout bug

[Socheat KHAUV]

I added width = Dimension.preferredValue(0.dp)

[Socheat KHAUV]

it works, not sure why