Sectioned RecyclerView Android - Androhub

Sectioned RecyclerView Banner

Sectioned RecyclerView Android

Hi all, Today we are going to learn how to make Sectioned RecyclerView which you have seen in PlayStore App. To know about RecyclerView and basic implementations you can see my previous articles on it.

To make Sectioned RecyclerView we are going to need a RecyclerView nested into another RecyclerView.

VIDEO

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 res ⇒ values ⇒ strings.xml and add below string values. These are some strings that we are going to use in our project.

3. Now go to activity_main.xml and add the below code to it. In this layout we are using three Button to show different types of Sectioned RecyclerView.

4. After adding three Button lets implement click event on them and open RecyclerViewActivity.java on Button click. For this add the below code to your MainActivity.java.

5. For RecyclerViewActivity.java create new xml layout naming recycler_view_activity.xml and add RecyclerView to it.

6. After creating recycler_view_activity.xml create RecyclerViewActivity.java class and put the below code to it. In this class we are populating RecyclerView with Sections and Items using SectionModel.java pojo class.

Vertical Sectioned RecyclerView
Vertical Sectioned RecyclerView

Horizontal Sectioned RecyclerView
Horizontal Sectioned RecyclerView
Grid Sectioned RecyclerView
Grid Sectioned RecyclerView

7. To identify the type of Sectioned RecyclerView we will create an ENUM java class naming RecyclerViewType.java and add the three enums to it.

8. Now create pojo class naming SectionModel.java for RecyclerView.

9. Now lets create adapter class for RecyclerView naming SectionRecyclerViewAdapter.java and put the below code to it. In this class we are setting different LayoutManager on basis of enum type inside onBindViewHolder method.

10. For RecyclerView sections we are going to create xml layout naming section_custom_row_layout.xml. This layout contains one section label, one show all button and one RecyclerView for displaying Section Items.

11. To display section items we need to create one more adapter for Items naming ItemRecyclerViewAdapter.java and put the below code to it.

12. For items adapter we need to create an xml layout naming item_custom_row_layout.xml. In this layout we are taking a CardView with ImageView and TextView.

13. Finally all done, now you can also make Sectioned RecyclerView.

Thanks. :)

 

18 Comments

Htoo Aung Hlaing
Thursday, February 8th, 2018

When I test with inner recyclerview item with 20, scroll not work well.Try to test and change inner recyclerview with many items

Dr. Droid
Thursday, February 8th, 2018

Hi Htoo Aung Hlaing,

Do one thing use below code for both RecyclerView :

recyclerView.setNestedScrollingEnabled(false);

Use this with both recyclerview and check.

Thanks

Pedro
Friday, February 23rd, 2018

notifydatasetchanged does not work in this example, how can i make it work?

Thanks

Dr. Droid
Wednesday, February 28th, 2018

Hi Pedro

Can you tell me what code you are using to notify adapter?

Thanks

snomen
Saturday, May 19th, 2018

How can I update a single row in the sectioned recycler view?

Dr. Droid
Saturday, May 19th, 2018

Hi Snomen,

To update single row item in Sectioned Recycler View you need to update that item pojo class and after that you have to notify its adapter.

Thanks

snomen
Sunday, May 20th, 2018

From ItemRecyclerViewAdapter, on clicking a row I’m starting a new Activity. After putting in few values in the activity I’m passing an object back to RecyclerViewActivity in onActivityResult()

if (resultCode == RESULT_OK) {
Person person = data.getParcelableExtra(“person”);
}
How can I pass this object so that only the clicked row is updated?

Shrikant
Wednesday, July 18th, 2018

Nice tutorial.. Keep it up bud 🙂

Amila
Tuesday, December 11th, 2018

i put this code into tab view fragment.then some time stuck the tab pane on load this.

Dr. Droid
Wednesday, December 12th, 2018

Hi Amila,

Are you doing any kind of api calls there?

Thanks

Amila
Thursday, December 13th, 2018

Hi Droid,

no any api calling. just loading in CARD view layout.

Mohsen
Monday, March 4th, 2019

It was very helpful for me
Thanks

shyam
Thursday, March 21st, 2019

Hi,thank you for this superb tutorial.
But in my implemenation,i am getting only one child in my sections.
The other childs are not visible.
So Please help me

Dr. Droid
Saturday, March 23rd, 2019

Hi Shyam,

Can you check your child width and height are wrap_content or not?
And also put logs to check size of the child array.

Thanks

Laxmikant
Saturday, July 20th, 2019

Is is possible to achieve this without using the second RecyclerView?

Dr. Droid
Monday, July 22nd, 2019

Hi Laxmikant,

Yes you can do it.

Thanks

Viral gohil
Thursday, March 19th, 2020

how to load json data on sectioned Recyclerview using volley library

Rus
Monday, October 5th, 2020

any idea how can i change the image from gallery on one item ?

Post comment

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