Android Staggered and Horizontal RecyclerView - Androhub

Staggered and Horizontal RecyclerView Banner

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. :)

 

17 Comments

Shanaka Perera
Saturday, February 27th, 2016

Good tutorial..

jackbear
Tuesday, March 15th, 2016

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

Droid
Tuesday, March 15th, 2016

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

jackbear
Wednesday, March 16th, 2016

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

Droid
Wednesday, March 16th, 2016

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.

renilia
Thursday, April 7th, 2016

Great tutorial, thanks !!!

donny
Saturday, October 1st, 2016

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

Dr. Droid
Saturday, October 1st, 2016

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

obbserv
Thursday, December 22nd, 2016

Getting grid layout instead of staggered grid layout.
Anyone??

Dr. Droid
Thursday, December 22nd, 2016

Hi Obbserv,

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

Thanks

hp
Wednesday, February 1st, 2017

How to make this auto scroll?

Dr. Droid
Wednesday, February 1st, 2017

Hi HP,

You can use below code for this:

recyclerView.post(new Runnable() {
@Override
public void run() {
// Call smooth scroll
recyclerView.smoothScrollToPosition(adapter.getItemCount());
}
});

Thanks

Shonali
Tuesday, March 7th, 2017

Very useful.

Sam
Sunday, August 27th, 2017

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

Dr. Droid
Sunday, August 27th, 2017

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.

Thank

Shan@88
Thursday, October 26th, 2017

Hi,

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?

Dr. Droid
Thursday, October 26th, 2017

Hi Shan@88,

The above article is about how to implement staggered RecyclerView. I have not shown how to implement click event on items.
To know how to implement click event on items please see this article : https://www.androhub.com/android-recyclerview/

Thanks

Post comment

Your email address will not be published. Required fields are marked *