With lazyvertical grid can you make items center aligned? I.e. there's 2 items but there's space fo...

# compose

[bryankeltonadams]

With lazyvertical grid can you make items center aligned?

I.e. there's 2 items but there's space for three to fit and it shows as xx- but I want -xx- where the minuses are half size of course.

So like -xxx-
--xx--

Instead of xxx
xx-

Hope that makes sense.

Like I want to be able to have 3 items in a row, but if there's only two I want it to look like the columns is set to fixed(2)

[Skaldebane]

By its mere definition as a "grid", that's unfortunately not possible

[Skaldebane]

You could however replace the grid with a LazyColumn of Rows, as it will give you more control over individual rows.

[bryankeltonadams]

Yeah, I mean for now I only have two options, so I want them to be center aligned like if I set fixed (2) but then I'd want to be able to put 3 options if I ever added it. I'm trying to do this for map types but only have two map types and I feel like it looks weird left aligned with only two.

[bryankeltonadams]

Maybe I'll just do an if in the columns block to make it fixed size if less than 3

[Skaldebane]

Yeah gotcha. With an even number, just an empty item would do, but not for an odd number (e.g. 3).

Depends on how much of an issue this is for you. You could maybe try to change the number of columns depending on the total number and the screen width, you'll hardcode some "magic numbers" but it should be fine. E.g. if you have 9 items, and your screen can only fit 4 (leaving 1 item stranded), you could instead use 3 columns instead.

[bryankeltonadams]

Makes sense! Thanks :)

[Stylianos Gakis]

If you make your grid have 6 columns
Then give all items a span of 2 by default.
For that odd row, add an empty 1span space item, then give the next 2 items a 2-span, and then 1 more 1-span empty item.

This would look smth like this right?

[11][11][11]
|1[11][11]1|

[Skaldebane]

Ooh that's actually really genius and simple!

[zt]

You can actually do it without adding any empty items or changing columns I believe.

Specifically the span parameter explained here near the bottom: https://developer.android.com/develop/ui/compose/lists#lazy-grids

[Skaldebane]

@zt That's exactly what Stylianos referred to.
The span can only be an Int, so you'll need to increase the number of columns to "mimic" a fractional span.
And then you need empty items to act as "padding" to center everything.

[Zakir Sheikh]

Or you can just wrap item with Box and centre align it there😅

[Skaldebane]

@Zakir Sheikh I think you misunderstood the question. This is in the context of a LazyVerticalGrid, which controls the layout of items through spans etc...
He wants to make a row of items in the grid look centered, which isn't trivial.

Though this would indeed be quite trivial if this was custom-made (e.g. LazyColumn simulating a grid), but that's even less trivial to do (not too hard, but a lot of work, losing the nice grid APIs).

[Zakir Sheikh]

@Skaldebane Thanks for the clarification. Actually I understood the question. I myself have dealt with this problem.
I wrote so because (someone above suggested grids with even columns can be centre aligned by emitting empty items) it is easy than workarounds.

BTW I guess a combination of size and wrapContent(align ) might also work.🙂