Android jetpack compose ellipsis wrap content Text when it reaches its container

Question

I'm currently working with android jetpack compose and i want to archive a behavior like this. I have UI like this . Here a TextView ("a name") is wrap_content and when it reaches the end of the container it'll automatically be ellipsised like this .

So here in order to archive this behavior in XML I used

<TableLayout
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:shrinkColumns="0"
  app:layout_constraintEnd_toStartOf="@id/icon_container"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toBottomOf="@id/card">
  <TableRow android:layout_height="match_parent">
    <TextView
      android:id="@+id/name"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:ellipsize="end"
      android:maxLines="1"
      android:textAlignment="textStart"
      tools:text="a name a name a name a name a name" />

    <TextView
      android:id="@+id/count"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      tools:text="(213)" />
  </TableRow>
</TableLayout>

I try to do the same behavior in jetpack compose but haven't found out a way to do it.

I try to do it with a Row but the first Text is not ellipsised until it push the second Text out of the Row and the width of itself is actually exceed the Row's width

Row(modifier = Modifier.fillMaxWidth()) {
  Text(
    modifier = Modifier
      .background(Color.Cyan),
    text = "Weekend Weekend Weekend Weekend Weekend Weekend ",
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
  )
  Text(
    modifier = Modifier
      .background(Color.Red),
    text = "(0)"
  )
}

Does this answer your question? [How to show ellipsis (three dots) at the end of a Text line in Android Jetpack Compose?](https://stackoverflow.com/questions/65736375/how-to-show-ellipsis-three-dots-at-the-end-of-a-text-line-in-android-jetpack-c) — Ticherhaz FreePalestine, Jul 13 '23 at 09:24
No it's not, in my case there is a second Text, and the first Text is not ellipsised until it push the second Text out of the Row and the width of itself is actually exceed the Row width — TRose, Jul 13 '23 at 09:31

score 6 · Accepted Answer · answered Jul 13 '23 at 09:53

6

Use width(IntrinsicSize.Max) instead of fillMaxWidth() on Row and give weight to the first text.

Row(modifier = Modifier.width(IntrinsicSize.Max)) {
    Text(
        modifier = Modifier.weight(1f)
            .background(Color.Cyan),
        text = "Weekend Weekend Weekend Weekend Weekend Weekend ",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
    )
    Text(
        modifier = Modifier
            .background(Color.Red),
        text = "(0)"
    )
}

Row will try to expand its width to the size that can fit both texts until it reaches the max width. Inside of Row, the second text is placed and the first take the rest of the space.

answered Jul 13 '23 at 09:53

ObscureCookie

756
2
10

There is no need to add width(IntrinsicSize.Max) for achieving required behaviour. Just weight modifier is enough. – Megh Jul 13 '23 at 10:35
@Megh Without weight, the second text will not be visible if the first text is long enough to take the max width. – ObscureCookie Jul 13 '23 at 10:38
Yes, that's what i told! Only weight modifier along with fillMaxWidth() is enough – Megh Jul 13 '23 at 10:40
@Megh In that case, the first Text composable will have empty space if the text is not long enough. I don't think that's what they want. – ObscureCookie Jul 13 '23 at 10:44
Okay got it. I misunderstood question due to alignment issues of images and text and I'm not able to edit it because there are lot of questions in the review queue. Adding vote for your answer. Keep it up – Megh Jul 13 '23 at 10:53

score 2 · Answer 2 · answered Jul 24 '23 at 23:16

Use Modifier.weight() with 'fill' parameter as false.

    Row {
        Text(
            modifier = Modifier
                .weight(1f, fill = false)
                .background(Color.Cyan),
            text = "Weekend Weekend Weekend Weekend Weekend Weekend ",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Text(
            modifier = Modifier.background(Color.Red),
            text = "(0)"
        )
    }

Android jetpack compose ellipsis wrap content Text when it reaches its container

2 Answers2