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

Answer 1

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.