With the current compose layouts is it possible to do something like this or I would need to create ...

# compose-android

[Tgo1014]

With the current compose layouts is it possible to do something like this or I would need to create my own layout implementation? Taking into account that it’s dynamic and any item can have any of the shapes

[Rebecca Franks]

I think you'd need a custom layout here, I think in CSS you'd use a grid layout to achieve this, but I'm not sure how CSS works with dynamic sized items.

[Tgo1014]

I think the current GridLayout that are available in compose just support one axis span right?

[Rebecca Franks]

yeah lazy grids in compose are for one axis span, what i mean is grid layouts in css have the ability to set a position in a grid and a size, which is kind of what you might need here, but if the items are dynamic then you'd need even more complicated logic 🙂

[Rebecca Franks]

Someone in the community has made a similar concept - https://betterprogramming.pub/gridpad-jetpack-compose-layout-for-grid-based-ui-fef161d42d5b and we do have Grid helper in ConstraintLayout https://medium.com/@jswong65/android-jetpack-compose-constraintlayout-grid-helper-c7b35cc8c09a

[Tgo1014]

Oh! Both links are great! I’ll take a proper look. Thanks @Rebecca Franks!

[Tgo1014]

Looks like both of them don’t support scrolling, which for me would be needed 😕 so I think i’ll have to try something custom

[Oleksandr Balan]

Maybe you could achieve it with LazyTable.

I would define an equal sized grid with that gap size and register item one-by-one with needed size and offset. However you have to calculate how many cells fit width, I guess BoxWithConstraint could help with this.

For example if gap is 16.dp, then get screen width and calculate number of cells, lets say it would be 19 cells for width. Then you may register that green box with offset 0x0 and size (19-1)/2=9 cells for width and height. The blue one would have 10x0 offset and 9x4 size, and so on.

Or alternatively you may take MinaBox and build your own layout on top of it 🐱

P.S.: If you precisely fit items in width, the horizontal scroll will be ignored (at least I hope so 😅).

#shameless-self-promo 😅
https://github.com/oleksandrbalan/lazytable
https://github.com/oleksandrbalan/minabox

[Tgo1014]

That’s super cool @Oleksandr Balan! I think this may be it. I was kinda trying to do something with offsets as I had no idea how to make lazy stuff and for sure the perfomance wouldn’t be so good. I’ll give your lib a try!

[Tgo1014]

Just passing by to confirm I was able to achieve exactly what I wanted! Still need some work to make it easier to add new items but I was able to make it look like expected. Huge thanks to you @Oleksandr Balan 🙌🏽 🙌🏽 🙌🏽

[Oleksandr Balan]

Awesome, thx! 🥳

[Tgo1014]

The padding trick was a bit too complicated, in the end I just split the columns and added the padding around each item itself, made it simpler to understand 😄