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.

Example

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

VIDEO DEMO

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 MainActivity.java.

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 Data_Model.java and add the following code.

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

7. Now create a adapter class for recyclerview naming RecyclerView_Adapter.java 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 MainActivity.java 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 RecyclerView_Activity.java 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 – >

COMMENTS (8)
Reply

Good tutorial..

Reply

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

    Reply

    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.

    Thanks

      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

        Hi,

        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.

Reply

Great tutorial, thanks !!!

Reply

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.

    Thanks

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)