I have a `Row` with two single line `Text`s. The f...

# compose

[Marcin Wisniowski]

I have a Row with two single line `Text`s. The first one has dynamic text, the second one short static text. How can I make TextOverflow.Ellipsis work on the first Text? I want the second Text to always show fully, and ellipsize the first one if needed. But it doesn't work - the first text pushes the second one offscreen before it starts to ellipsize.

[Tin Tran]

Try adding weight 1f to the second text

[Marcin Wisniowski]

That doesn't help.

[Marcin Wisniowski]

I think I need to somehow enforce the min size of the second Text, but I'm unsure how.

[Dmitrii Smirnov]

Try adding weight 1f to the first text only

[Marcin Wisniowski]

That does work, but then text two is pushed to the end of the row (which has the width of the screen). So works when there is text to ellipsize but leaves white space when there isn't.

[Marcin Wisniowski]

One         Two
One one o...Two

[Marcin Wisniowski]

Where I need

One Two
One one o...Two

[Abhinav Suthar]

@Marcin Wisniowski Give weight to the both texts if you want to share width between them in a specific ratio. Eg 1:2

Or if you want second text add a minimum space at the end of it then you can use spacer or add end padding

[Marcin Wisniowski]

I can't do that because I will end up with whitespace between the texts. I don't want to share portions of the width, they should just be left aligned. Let's say text one is "100" and text two is "dollars". I just want my Row to say "100 dollars", but ellipsize to "1000... dollars" if the first text is too long.

[Marcin Wisniowski]

If I give the first one weight I will end up with "100 (whitespace) dollars"

[ste]

Same problem here, would you mind share the code (if possible, of course)?

[Marcin Wisniowski]

@ste Sorry, I can't share that code, but it really wasn't rocket science. Just have a custom layout, take it's width, measure the second Text/View, subtract to get the remaining width for the first one, and set the remaining width as the constraint for the first one.

[ste]

@Marcin Wisniowski don't worry, got it!

[ste]

I ended up using this one (as suggested here), not sure if this is optimal for performance:

@Composable
fun ReversedRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = <http://Alignment.Top|Alignment.Top>,
    content: @Composable RowScope.() -> Unit
) {
    val layoutDirection = LocalLayoutDirection.current
    val oppositeLayoutDirection = when (layoutDirection) {
        LayoutDirection.Ltr -> LayoutDirection.Rtl
        LayoutDirection.Rtl -> LayoutDirection.Ltr
    }

    CompositionLocalProvider(LocalLayoutDirection provides oppositeLayoutDirection) {
        Row(modifier = modifier, horizontalArrangement = horizontalArrangement, verticalAlignment = verticalAlignment) {
            CompositionLocalProvider(LocalLayoutDirection provides layoutDirection) {
                content()
            }
        }
    }
}

[Marcin Wisniowski]

Hah, feels hacky but interesting!