Search code examples
androidstaggered-gridview

How to make a staggered grid view with rows of equal height like Google Image Search?

Does anyone know how to implement a staggered grid view / layout like the result screen in Google Image Search? See below image.

Staggered grid view like Google Image Search This grid has items with (almost) equal height. And it is vertically scrolled. Which is useful for a gridview with items in a specific order, for example sorted by publication date.

Visually, in a staggered grid with rows of equal height, the order of the items is easier to read because of easy reading from left to right.

Compare this to the staggered grid with columns of equal width. See the image below. The order of the items is not easily readable (which in the case of this website does not matter). So this is not what I am looking for!

Pinterest masonry layout

In the Android API documentation, I can't find a clue how to create the staggered grid in the first picture above. In all posts labeled Staggered Grid and Android on Stack Overflow I can't find an answer.

So my question is: how to accomplish this staggered grid with:

  • rows of equal height, and
  • vertically scrolled?
Solution

  • Android doesn't provide a default library for the StaggeredGridView. You can either do this with a RecyclerView with StaggeredGridLayoutManager (https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html) or you can make use of a custom library- com.etsy.android.grid.StaggeredGridView. Download it via your gradle file:

    repositories {
    mavenCentral()
}

dependencies {
    compile 'com.etsy.android.grid:library:x.x.x'
}

    For details, visit: http://www.technotalkative.com/lazy-productive-android-developer-part-6-staggered-gridview/