Is it possible to create a component like this in ...

# compose

[Colton Idle]

Is it possible to create a component like this in compose which will behave like the top when there is a lot of text, but show like the bottom when there's not a lot of text?

[Colton Idle]

I have the top one working like this

@Preview
@Composable
fun TextWithSquare() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .clickable { }
    ) {
        Text(
            "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ",
            maxLines = 1,
            modifier = Modifier
                .padding(end = 16.dp)
                .weight(1f),
            overflow = TextOverflow.Ellipsis
        )
        Box(
            Modifier
                .background(Color.Blue)
                .requiredHeight(24.dp)
                .requiredWidth(24.dp),
        )
    }
}

[Colton Idle]

but since I add a weight to the Text, I can't get it to look like the bottom picture.

[Se7eN]

Try adding weight to the Box instead of the Text

[Colton Idle]

I tried adding a weight of 1 and that didn't work either.

[Bryan L]

How about adding an arrangement on the row? Something like

Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .clickable { }
    ) {

[Timo Drick]

This works:

Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .width(IntrinsicSize.Max)
            //.fillMaxWidth()
            .padding(horizontal = 16.dp)
            .clickable { }
    ) {

But not so clean in my opinion. But i do not have a better solution. Maybe some one else?

[Colton Idle]

@Timo Drick that works! Thanks! The whole intrinsic size thing seems a little weird to me (but that's probably because I'm just not familiar with it).

Sorry to ping you directly @Adam Powell but do you have any ideas of the "right" way to do this.

[Adam Powell]

try .weight(1f, fill = false)

[len]

Sorry to hijack this thread, but I got a similar setup, however I want the second item to stick to the right.

What is preferable in this situation?
1: .weight(1f) on the first element
2: Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) in the parent

I kind of prefer the second one, however it's taking some of the second item width, while this doesn't happen with the first one

[Adam Powell]

not sure what you mean by "it's taking some of the second item width" - got a comparison image?

[Colton Idle]

@Adam Powell that worked! So awesome. Thank you!

[len]

Sure, here it's. The second item is a IconButton I guess it'd need some minWidth modifier

[Adam Powell]

How are the elements other than the icon declared in that row for the second one?

[len]

Row(
  modifier = Modifier.fillMaxWidth().height(64.dp).padding(start = 16.dp),
  verticalAlignment = Alignment.CenterVertically,
  horizontalArrangement = Arrangement.SpaceBetween
) {
  Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
    Text("Title")
    Text("Subtitle")
  }
  IconButton()
}

[len]

I have some styling (style and color) on the texts but no modifier

[Adam Powell]

ok, yes, the longer title is taking precedence since unweighted child elements are measured in the order they appear. To account for that you'll want to use weight here.

[len]

I see, thanks. So it's better to use weight unless the stickied item has fixed constraints

[Adam Powell]

it's better to use weight whenever you want an element to measure with the space left over after everything else has measured