Friday, June 24, 2022
HomeTutorialsCreate Nested ReyclerView Android

Create Nested ReyclerView Android

How to Create Nested Recyclerview android studio

This tutorial describes how to Create Nested ReyclerView Android. Nested RecyclerView is the idea of play store application or e-commerce application or music application.

You can scroll vertically through parent RecyclerView. Each row of parent RecyclerView represents the type or category and contains horizontal(child) RecyclerView . The child RecyclerView contains product details. Moreover, I will concentrate on outOfBoundIndex error that may appear with you when you create it.

When the Array List size of the child RecyclerView is equal for all parent RecyclerView this error disappears. But when the Array list of in each horizontal RecyclerView is different it will give you outOfBoundIndex exception.

RecyclerView is advanced type of list view because it shows a list of views which are represented by view holder objects. which are instances of View Holder class. This class extends RecyclerView.ViewHolder. The holder object is manged by ReyclerAdapter.

This adapter creates view holder as needed. and binds it to the data from array list by defining the position. and calling onBindViewHolder() method. This method uses the view holder’s position to determine what the contents should be based on its list position.

Create Nested RecyclerView Android

Now we will start to Create Nested ReyclerView Android. Start a new android studio project and open module level gradle file to add project dependencies. After adding dependencies click on sync .

module level gradle file
dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.3.0-alpha01'
 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
 testImplementation 'junit:junit:4.13'
 androidTestImplementation 'androidx.test:runner:1.3.0-rc01'
 androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0-rc01'
 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

 // add the following dependencies

 implementation 'androidx.cardview:cardview:1.0.0'
 implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha04'
 implementation 'com.google.android.material:material:1.3.0-alpha01'
 implementation 'androidx.recyclerview:recyclerview:1.1.0'

}

Vertical (parent) RecyclerView XML Layout

Now, open main activity XML layout file to add the recycler view of vertical layout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
 android:id="@+id/recyclerView"
 android:layout_width="0dp"
 android:layout_height="0dp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Vertical RecyclerView Row Layout

Next, create new resource layout file. This file will contain TextView for parent item name and a RecyclerView which represents the horizontal(child) layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="10dp">
<androidx.cardview.widget.CardView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:cardCornerRadius="15dp"
 app:cardElevation="15dp">
<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:background="@android:color/holo_purple">
<TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="Item Name"
 android:gravity="center"
 android:textColor="@android:color/white"
 android:textSize="20sp"
 android:layout_margin="5dp"
 android:textStyle="bold"
 android:id="@+id/itemname"/>

<androidx.recyclerview.widget.RecyclerView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/daysRV"
 android:layout_margin="10dp"/>

</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

Horizontal ReyclerView XML row layout

This step, you need to create the new resource layout file that contains TextView which represents the child item.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp">
<androidx.cardview.widget.CardView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:cardCornerRadius="15dp"
 app:cardElevation="10dp">
<LinearLayout
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:orientation="vertical"
 android:background="@android:color/holo_orange_light">
<TextView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:text="Day"
 android:gravity="center"
 android:textStyle="bold"
 android:textSize="20sp"
 android:id="@+id/days"
 android:textColor="@android:color/white"/>
</LinearLayout>
</androidx.cardview.widget.CardView>

</LinearLayout>

Horizontal RecyclerView Adapter Java

The horizontal RecyclerView Adapter will hold and deals with the sub-items. In this tutorial the sub-items (horizontal items) simply a TextView. So, we will cast ArrayList of String day name in the adapter constructor.

public class ChildRecyclerAdapter extends RecyclerView.Adapter<ChildRecyclerAdapter.MyViewHolder> {

ArrayList<String> arrayList;

public ChildRecyclerAdapter(ArrayList<String> arrayList) {

this.arrayList = arrayList;
}

@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.child_rowlayout,parent,false);

return new MyViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
holder.Days.setText(arrayList.get(position));

}

@Override
public int getItemCount() {
return arrayList.size();
}

public class MyViewHolder extends RecyclerView.ViewHolder{

TextView Days;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
Days = itemView.findViewById(R.id.days);
}
}
}

Vertical RecyclerView Adapter Java.

To avoid the error of outOfBoundIndex error, the arrayList of horizontal recycler should be created and initiated inside the (onBindViewHolder) method of the vertical (parent) Recycler View Adapter.

In this adapter, I have created different child arrayList sizes. Because, the (outOfBoundIndex) is not appear if the size of child arrayList is equal in each row. But, if this arrayList has different sizein each row the error will appear.

public class ParentRecyclerAdapter extends RecyclerView.Adapter<ParentRecyclerAdapter.MyViewHolder> {
ArrayList<String> arrayList;
Context context;


public ParentRecyclerAdapter(ArrayList<String> arrayList, Context context) {
this.arrayList = arrayList;
this.context = context;
}

@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.parent_rowlayout,parent,false);
return new MyViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
holder.ItemName.setText(arrayList.get(position));
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(context,LinearLayoutManager.HORIZONTAL,false);
holder.DaysRV.setLayoutManager(layoutManager);
holder.DaysRV.setHasFixedSize(true);
ArrayList<String> daysArryList = new ArrayList<>();
daysArryList.clear();
if(arrayList.get(position).equals("Name One")){
String[] days = {"Sat","Sun","Tue"};
for(int i = 0;i< days.length;i++){
daysArryList.add(days[i]);
}
}
else {
String[] days = {"Sat","Sun","Tue","Mon","Wed"};
for(int i = 0;i< days.length;i++){
daysArryList.add(days[i]);
}
}

ChildRecyclerAdapter childRecyclerAdapter = new ChildRecyclerAdapter(daysArryList);
holder.DaysRV.setAdapter(childRecyclerAdapter);
childRecyclerAdapter.notifyDataSetChanged();


}

@Override
public int getItemCount() {
return arrayList.size();
}

public class MyViewHolder extends RecyclerView.ViewHolder{

TextView ItemName;
RecyclerView DaysRV;



public MyViewHolder(@NonNull View itemView) {
super(itemView);
ItemName = itemView.findViewById(R.id.itemname);
DaysRV = itemView.findViewById(R.id.daysRV);
}
}
}

Thank You

Tutorials you might interest.

RELATED ARTICLES

1 COMMENT

  1. hello sir please make a tutorials on the same nested recyclerview with colapse and expand mean expandalbe if possible thanks a lot

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

KU NUR RASYIDAH BINTI KU BIDE on Custom Calendar View Android | Project Java Files
SHIVANT KUMAR PANDEY on Login And Registration by Firebase
Adriane Troy U. Alariao on Custom Calendar View With Events Android