Android Staggered and Horizontal RecyclerView

Android Staggered and Horizontal RecyclerView

In my earlier tutorials of RecyclerView we had learn how to use RecyclerView to create ListView and GridView items. Today we are going to create Staggered GridView and Horizontal RecyclerView.

Staggered GridView

Staggered GridView is nothing but GridView with random grid sizes that look nice in app. To achieve this we need  StaggeredGridLayoutManager and the syntax is shown below :

Here 2 is the no. of columns that you want in single row.

Horizontal RecyclerView

In earlier android we need to create a custom class for horizontal listview but in latest RecyclerView library we don’t need this thing we can achieve this thing in simple one step :

Here we have to set LinearLayoutManager to HORIZONTAL or VERTICAL according to our need.


In this tutorial, we are going to learn how to use RecyclerView for Staggered GridView and Horizontal ListView.


1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is

2. Open build.gradle and include the recyclerview library.

3. For recyclerview create a xml file naming recyclerview.xml and add the following code.

4. Now for recycler view we have to create a custom layout naming item_row.xml and add the following code.

If you want to learn more about recycler view read this tutorial.

5. Create a getter and setter class naming and add the following code.

6. Now create ViewHolder class naming and add the following code.

7. Now create a adapter class for recyclerview naming and add the following code.

8. Now create a new layout xml file naming activity_main.xml and add the following code. In this i am using two buttons for Staggered gridview and horizontal recyclerview.

9. Open your and add the following code. In this code a new activity opens on both button click and a data is pass via intent to next activity.

10. In above we are opening new activity so we need to create a new activity naming and add the following code. In this code we get the intent data and according to that intent data we display the recyclerview i.e horizontal or staggered.

11. Finally add the second activity i.e. RecyclerView_Activity to your Manifest file.

12. Now, you are all done, run your app and you will get the output as shown in video.

Thanks. :)

Download Source Code


About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.


Good tutorial..


if i want to use URL as an image, what should i do?


    Hi JackBear,

    For image url you can use Glide, Picasso or Universal Image Loader libraries for loading URL over imageViews. Just google about this Libraries and they are easy to use. You can check one of my tutorial about Universal Image Loader.


      thank you, i use picasso and change the image parameter to string and change the adapter using picasso, it works 😀

      now for the next part, if i want to use onclicklistener to each of the item in recyclerview, what should i do? o.o


        I had given one RecyclerView link at the start of this tutorial. Open that url you will get to know how to implement onClickListener over RecyclerView.


Great tutorial, thanks !!!


how to make width of card view to half screen or fourth screen

    Hi Donny,

    For cardview width half of the screen you need to use GridLayoutManager and set COULMN SPAN to 2. By doing this only 2 CardView will be displayed.



Getting grid layout instead of staggered grid layout.

    Hi Obbserv,

    You can use GridLayoutManager instead of StaggeredGridLayout and for this you need to fix the height of your CardView.



How to make this auto scroll?

    Hi HP,

    You can use below code for this: Runnable() {
    public void run() {
    // Call smooth scroll



Very useful.


Great example. But in my case it is producing same height of all items in recyclerview.

    Hi Sam,

    It might be as you are not putting height of your image view wrap content or all of your Images are of same size.



When you move your cursor over a particular item, the item gets highlighted, (I am not sure if highlighted is the right word to be used here). However I see that there is no onClick method implemented. Could you please tell how this is handled?

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)