Row with two Text in Constraint fashion in Jetpack Compose

Question

I want to include two Text in a Row where the first Text's width is upto the start of 2nd Text, like this

I am trying Modifier weight but the result achieved is not the same. Is there a way to do it by using Row itself and not ConstraintLayout.

EDIT :

Row(modifier = Modifier.fillMaxWidth()) {
          Text(
            "Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(5f)
          )
          Text("View all", modifier = Modifier.weight(1f))
        }

This works, please suggest a better solution if I am missing something.

EDIT 2 : Its giving me results like this: I want the Title to start from the beginning of Row

Answer 1

if you have all single line text then simply use this

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Start")
    Text(text = "End")
}

When we are using horizontalArrangement = Arrangement.SpaceBetween we don't need to assign weights if texts are always going to be a single line.

Similarly for three Texts

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Start")
    Text(text = "Center")
    Text(text = "End")
}

and to further have them neatly CenterVertically

{
    Text(
         text = "Start",
         modifier = Modifier.align(Alignment.CenterVertically)
   )
    Text(text = "End",
         modifier = Modifier.align(Alignment.CenterVertically)
   )
}

Answer 2

Just for comparison, this is the same solution but done with ConstraintLayout:

ConstraintLayout(
    modifier = Modifier.fillMaxSize()
) {
    val (title, viewAll) = createRefs()

    Text(text = "View all", Modifier
        .background(Color.Green)
        .constrainAs(viewAll) {
            top.linkTo(parent.top, 8.dp)
            end.linkTo(parent.end, 8.dp)
        })

    Text(text = "Short title",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier
            .background(Color.White)
            .constrainAs(title) {
                top.linkTo(parent.top, 8.dp)
                start.linkTo(parent.start, 8.dp)
                end.linkTo(viewAll.start, 8.dp)
                width = Dimension.fillToConstraints
            })
}

Answer 3

You can use something like:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween) {
    Text(
        "Short title",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier.weight(1f)
    )
    Text("View all")
}