Etsy Android Staggered Grid

December 27, 2013

Last week at Etsy we open sourced the staggered grid view from the new Etsy Android app. Somewhat surprisingly there’s been a large amount of interest from the Android community. I guess I shouldn’t be surprised. Whilst working on various apps I’ve found it challenging to implement advanced UI elements such as the staggered or masonry grid.

Thankfully I had the opportunity during a recent project at Etsy to implement this grid view that would support advanced features such as rows of varying heights & syncing row positions across orientation changes. Before deciding to develop the grid, we did of course evaluate existing options available including the unfinished StaggeredGridView in the AOSP source. In the end we came to the conclusion that if we were going to build something stable, reliable and performant it was a necessity to understand the entire scope of how the grid functioned and to achieve that we decided to develop a new component.

I’m quite happy with the results. The grid was developed over the course of two weeks. During the project we tested the grid on a number of devices available in our awesome Etsy Device Lab. We also found and fixed a couple of issues with the grid post launch using live crash logs.

Finally after open sourcing the grid, we’ve promoted release artifacts for the initial version to Maven Central, and will maintain releases here ongoing. So now it’s a simple one-liner to add the AndroidStaggeredGrid to your project. Big thanks here go to Chris Banes for his helpful Gradle plugin for uploading Android Artifacts to Maven.

You can find out more, how the grid is used and also run the sample app over on the Etsy Github -