https://kotlinlang.org logo
#compose
Title
# compose
d

David Corrado

06/21/2022, 10:51 PM
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 🧵
Copy code
Row {
    Row {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Text("test3")
}
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
Copy code
Row {
    Row {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Row {
        Text("test")
        Spacer(modifier = Modifier.weight(1f))
        Text("test2")
    }
    Text("test3")
}
d

dorche

06/21/2022, 11:48 PM
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
c

Chris Sinco [G]

06/21/2022, 11:59 PM
Do you have a visual of what you want to achieve?
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
d

David Corrado

06/22/2022, 12:09 AM
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.
f

Francesc

06/22/2022, 5:06 AM
You have to give your rows a weight. You could also consider creating a
Layout
for more flexibility. That would be my choice.
s

Stylianos Gakis

06/22/2022, 11:32 AM
Maybe look into this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1653337434396329?thread_ts=1653286229.852159&cid=CJLTWPH7S And do something like:
Copy code
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?
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
d

David Corrado

06/22/2022, 2:52 PM
Wow. Super helpful @Stylianos Gakis. Appreciate all the effort. Ill work with your code chunk. Based on your demos seems like what I want
👏 1
Also @Francesc tried out what you suggested with putting a weight on the row and that seemed to work too.
Copy code
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
s

Stylianos Gakis

06/22/2022, 3:11 PM
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
f

Francesc

06/22/2022, 3:14 PM
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
s

Stylianos Gakis

06/23/2022, 7:01 AM
With the snippet above you get these cases when things get too cramped. Is this really what you want? Things do get hidden completely.
22 Views