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

Add the code you have already tried. The `weight` modifier should work — Phil Dukhov, Sep 30 '21 at 10:24
Sorry, I was adding max width to the first text as well.. Thats why it wasn't working — Ali_Waris, Sep 30 '21 at 10:43
Check if [this](https://stackoverflow.com/q/64746671/9652621) question helps you — Vishnu, Sep 30 '21 at 10:43
You can to remove weight from the second `Text`: in this case second size will be calculated at first, and then first text will take the remaining space. Check out [this answer](https://stackoverflow.com/a/68972289/3585796) for more details. — Phil Dukhov, Sep 30 '21 at 10:49
When using small text for Title, its not starting from the beginning of Row, rather occupies center position from the available space. — Ali_Waris, Sep 30 '21 at 10:55
@PhilipDukhov I have updated the question with Screenshots. Please guide me. — Ali_Waris, Sep 30 '21 at 10:59
@Ali_Waris Are you sure you've removed `weight` from the second text and left on the first one? If so add your updated code — Phil Dukhov, Sep 30 '21 at 11:04
When I applied a weight of 1f to the first Text and set its width to fillMaxWidth, it works as expected — Ali_Waris, Sep 30 '21 at 11:40

score 12 · Accepted Answer · answered Sep 30 '21 at 15:27

12

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

answered Sep 30 '21 at 15:27

Gabriele Mariotti

320,139
94
887
841

1

What if we are expecting both text views ("Short title" and "View all") to be next to one another, but expand to the max width of parent. – Bheem Feb 17 '22 at 05:35
1

@Bheem Just add fill = false and it works. modifier = Modifier.weight(1f, fill = false) – RedSIght Nov 21 '22 at 11:00
@Bheem You can check this example. https://stackoverflow.com/questions/73582825/how-to-chain-two-text-with-constraintlayout/73584535#73584535 – Gabriele Mariotti Nov 21 '22 at 11:04

Roberto Leinardi · Answer 2 · 2022-01-23T21:12:42.033

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

Thanks, @Roberto Leinardi I up voted your nice answer – Sepideh Vatankhah Feb 10 '22 at 23:18 — Sepideh Vatankhah, Feb 10 '22 at 23:18

Atiq · Answer 3 · 2023-03-31T04:50:50.780

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

Row with two Text in Constraint fashion in Jetpack Compose

3 Answers3