A super simple and performant LazyStaggeredGrid for Jetpack Compose
As the title indicates, I have been on the lookout for a simple staggered grid for Jetpack Compose, one that recycles items correctly.
Apparently such a feature is in the official Compose roadmap but it’s not planned for immediate development so we may have to wait a little while.
In my search, I found a recently created library just for this purpose (https://github.com/nesyou01/LazyStaggeredGrid/) and it suited my needs until I started feeding it thousands of images at which point I started getting heavy jank while scrolling fast due to frequent global garbage collection calls.
My initial thought was that there was something wrong with the image library I was using (Coil) but after some research I found out that Coil did indeed have an issue with this in the past but was apparently resolved. To verify this I tried using a simple LazyColumn provided with Compose and indeed, the jank was gone.
It then hit me. Why not use the built in LazyColumn, which is very performant, to imitate the staggered grid look?
The idea is to place multiple LazyColumns in a row next to each other and synchronize their scroll positions. Then you simply add items one by one to each ‘column’ until you run out of items.
And it worked like a charm! :)
The grid can be customized with any number of columns.
With a little bit of syntactic sugar, you end up with this:
If you want to use this in your project, you can find the code here: https://github.com/savvasdalkitsis/lazy-staggered-grid
Note that this is a very naive approach to a staggered grid there are some issues. Namely, when you change orientation, the position of the lists will be messed up and you may have to synchronize them yourself (I may get around to fixing that issue myself in the github project)
