# compose

Alexander Stark

05/23/2022, 6:10 AM
Hi there, I'm struggling with a challenge. I have two text fields in a row. One one the right side and one on the left side. In best case the whole text of the right side is always shown and the text on the left side takes the rest of the space. If the right text is too long the left text should have a min width, so that at least some text with ellipses is shown. In my solution the right text takes the whole width and the left text is hidden. Even when I set the min width (I thought I set it). Any idea how to solve it?
Copy code
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
            modifier = Modifier
                .widthIn(min = 200.dp),
            textAlign = TextAlign.Start,
            text = "Left side side side side side side side",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            textAlign = TextAlign.End,
            text = "Right right right right right right",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
In best case I would be able to tell the right text to take only 60% but if the 60% is not required take less. With
it's a fixed space of 60% even if it's not required

Farid Mrz

05/23/2022, 2:47 PM
You can try this with constraint layout

Alexander Stark

05/23/2022, 4:54 PM
Any more hints?
But seeing that you want to have a minimal width i think you might need to write your own layout and apply your logic during the measurment phase…
this article should be very helpfull to understand this part of compose

Stylianos Gakis

05/23/2022, 8:23 PM
I believe this is what you’re looking for We’ve been using this in prod and it’s working as it should.

Alexander Stark

05/24/2022, 6:19 AM
@Stylianos Gakis this looks good. Will check it later. But looks promising. THANKS