I am trying to get some content align with in a sp...

# compose

[David Corrado]

I am trying to get some content align with in a specific way and wanted some thoughts on how you would build this. Weight of 1 seems to fill the full width so I am nesting that and assumed I could put something to the right of it but its off the screen 🧵

[David Corrado]

Row {
    Row {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Text("test3")
}

[David Corrado]

Here is my code. But text3 is off the screen. How do I build something like this. I know I could put them all within the row and it would work. I am trying to do something really like this which would not work for just putting it into the nested row

Row {
    Row {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Row {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Text("test3")
}

[dorche]

What do you expect to happen if the 5 strings don't find on one row by their own? E.g. with different text value.

Anyway you probably want to get rid of the weight spacer and instead do
horizontalArrangement = Arrangement.SpaceBetween
On your Rows

[Chris Sinco [G]]

Do you have a visual of what you want to achieve?

[Chris Sinco [G]]

Depending where the parent Row is you might need to specify a width. Even fillMaxWidth. Otherwise the weight modifiers will push things off screen because the parent Row is sized to its contents, with no constraints

[David Corrado]

Basically what I want is the
"45m" and "Nov 1" to be on first line left and right aligned where its impossible to overflow them into each other.
Second line is Image, Jogging Text and to the right Time.
Then to the right the chevron icon.

I will explore without weights. Let me know if you have any other suggestions.

I was hoping to use a weight within this content but the parent still can have something to the right and wrap content. I was hoping to not have to do something that I have to define a specific width and just throw it at the end and have it just work. It seems weight forces it to be as large as possible ignoring the parent contents.

[Francesc]

You have to give your rows a weight. You could also consider creating a Layout for more flexibility. That would be my choice.

[Stylianos Gakis]

Maybe look into this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1653337434396329?thread_ts=1653286229.852159&cid=CJLTWPH7S
And do something like:

Card {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Column(Modifier.weight(1f, true)) {
            HorizontalTextsWithMaximumSpaceTaken(
                {
                    Text("45m")
                },
                { textAlign ->
                    Text("Nov1", textAlign = textAlign)
                }
            )
            HorizontalTextsWithMaximumSpaceTaken(
                {
                    Text("Jogging or running")
                },
                { textAlign ->
                    Text("10:45 AM", textAlign = textAlign, style = MaterialTheme.typography.h4)
                }
            )
        }
        Icon(Icons.Default.ArrowForward, null, Modifier.size(40.dp))
    }
}

Is it what you’re going after?

[Stylianos Gakis]

HorizontalTextsWithMaximumSpaceTaken name isn’t necessarily true, since it’s two slots, they could also not be texts in your use case and you can add the running icon in there or whatever. HorizontalItemsWithMaximumSpaceTaken maybe 😅 I am bad at naming stuff

[David Corrado]

Wow. Super helpful @Stylianos Gakis. Appreciate all the effort. Ill work with your code chunk. Based on your demos seems like what I want

[David Corrado]

Also @Francesc tried out what you suggested with putting a weight on the row and that seemed to work too.

Row {
    Row(modifier = Modifier.weight(1f)) {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Text("test3")
}

Like the above. Basically I wanted
|test test2test3| which is what the above does

[Stylianos Gakis]

This has the problem of if "test1" is too big it will gobble up the entire space and make test2 (and test3 I think) non existent or super tiny. Try it with a small screen and/or a big test1 to see

[Francesc]

that's what the fill parameter on weight can be used for, set it to false if you want to ensure the non-weighted item is not pushed off the sceren

[Stylianos Gakis]

With the snippet above you get these cases when things get too cramped.
Is this really what you want? Things do get hidden completely.