What I am missing here in this layout arrangement, I want to bring Central Text to very next Dot , n...

# compose

[Chethan]

What I am missing here in this layout arrangement, I want to bring Central Text to very next Dot , not in the center ?

Here is my code :

ConstraintLayout(modifier = Modifier.fillMaxWidth()) {

    val (dot, title, deleteButton) = createRefs()

    Image(
        asset = vectorResource(id = if (!notifications.readFlag) R.drawable.ic_ellipse_red else R.drawable.ic_ellipse_white),

        modifier = Modifier
            .constrainAs(dot) {

                linkTo(
                    start = parent.start,
                    end = title.start
                )
                centerVerticallyTo(parent)
            }
    )

    Text(
        text = notifications.title,
        style = TextStyle(
            color = black33,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Start
        ),
        modifier = Modifier.fillMaxWidth(0.9F).constrainAs(title) {

            linkTo(
                start = dot.end,
                end = deleteButton.start
            )
        }.padding(start = 10.dp)
    )

    Image(
        asset = vectorResource(id = R.drawable.ic_icon_delete_gray),
        modifier = Modifier.wrapContentSize()
            .clickable(
                onClick = {
                    showPopUpToDelete.value = true
                }
            ).constrainAs(deleteButton) {
                end.linkTo(parent.end)

                linkTo(
                    start = title.end,
                    end = parent.end
                )
            }
    )
}

This is how presently looking

[Chethan]

This is what I need

[rsktash]

Try like this
Row{
Icon()
Text(weight 1)
Icon()
}

[rsktash]

As I suggested in previous thread you can look into InputField implementation of leading and trailing composables

[Chethan]

Is that Input field android compose function ? I have not seen InputFiled , Do you have an example ?

[rsktash]

Sorry for the misstype. There is a OutlinedTextField composable which is compose analogue of outlinededittext

[Chethan]

Okey , let me try that

[Chethan]

Again this structure also keep the text in center

Row{
 Icon()
 Text(weight 1)
 Icon()
}

Row {

    Image(
        asset = vectorResource(id = if (!notifications.readFlag) R.drawable.ic_ellipse_red else R.drawable.ic_ellipse_white),

        modifier = Modifier.wrapContentSize()
    )

    Text(
        text = notifications.title,
        style = TextStyle(
            color = black33,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Start
        ),
        modifier = Modifier.weight(1F).padding(start = 10.dp)
    )

    Image(
        asset = vectorResource(id = R.drawable.ic_icon_delete_gray),
        modifier = Modifier.wrapContentSize()
            .clickable(
                onClick = {
                    showPopUpToDelete.value = true
                }
            )
    )
}

[Chethan]

[Chethan]

outlinededittext is for inputting text , how is that going to fit here