Android Staggered GridView Tutorial will guide you through a detailed explanation of how and why images in the various social networking apps are shown in a new style.

If you are new to this terminology here a small introduction for you staggered view is a way of displaying image in a different style based on the image dimensions in a surprising style for each and every image.



Images are shown in different proportions based on their dimensions and even some apps show a mixed view of images and videos like instagram. In coming tutorial we will be experiencing such a view where videos are loaded and played with autoplay feature when we scrolled onto the video view.


When it comes to the implementation technically there is no much difference in regular style of showing images to this staggered view.

Let’s start..


Start with adding a recyclerview to your ConstraintLayout


then design a recyclerview row according to your requirements on this default view



Use a RelativeLayout for this view, add a ImageView







Add your images as desired to a ArrayList


Use StaggeredGridLayoutManager to display the images in Staggered style


pass image array to RecyclerViewAdapter








Show Buttons
Hide Buttons
Read previous post:
Android Upload Image Using Retrofit Library Part 2 || Upload Image to Server