Multiple Recyclerview Introduction:-

The RecyclerView class extends the ViewGroup class and implements ScrollingView interface. It is an advanced version of the ListView with improved performance and other benefits. RecyclerView is mostly used to design
the user interface with the fine-grain control over the lists and grids of android application.

RecyclerView was introduced in Material Design in API level 21.

 

Add Required Dependancy:-

Gradle Scripts > build.gradle and inside dependencies

For Androidx use this  gradle dependency

dependencies {
....
implementation 'androidx.recyclerview:recyclerview:1.0.0'
}
or
dependencies { .... implementation 'com.google.android.material:material:1.0.0' }

Create a Model class for single Item:-

This class is responsible for managing the data of the application. It responds to the request from the view and it also responds to instructions from the controller to manipulate the data.
Create a new class named SingleDataModel.java and write the following code.
package com.androidcreation.multiplerecyclerview;

public class SingleDataModel {
private String name;
private int url;
private String description;

 public SingleDataModel() {
}

public SingleDataModel(String name, int url) {
this.name = name;
this.url = url;
}
public int getUrl() {
return url;
}

public void setUrl(int url) {
this.url = url;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getDescription() {
return description;
}

public void setDescription(String description) {
this.description = description;
}
}

Create a Model for Multiple Data:-

 Create a new class named MultipleDataModel.java and write the following code.
package com.androidcreation.multiplerecyclerview;


import java.util.ArrayList;

public class MultipleDataModel {
private String headerTitle;
private ArrayList<SingleDataModel> allItemsInSection;

public MultipleDataModel() {

}
public MultipleDataModel(String headerTitle, ArrayList<SingleDataModel> allItemsInSection) {
this.headerTitle = headerTitle;
this.allItemsInSection = allItemsInSection;
}

public String getHeaderTitle() {
return headerTitle;
}

public void setHeaderTitle(String headerTitle) {
this.headerTitle = headerTitle;
}

public ArrayList<SingleDataModel> getAllItemsInSection() {
return allItemsInSection;
}

public void setAllItemsInSection(ArrayList<SingleDataModel> allItemsInSection) {
this.allItemsInSection = allItemsInSection;
}
}
 

Add Recyclerview in activity_main.xml

Now come inside activity_main.xml and create a RecyclerView here, in this RecyclerView we will display the Item List.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<androidx.appcompat.widget.Toolbar
android:layout_width="fill_parent"
android:background="#f2b915"
android:id="@+id/toolbar"
android:layout_height="wrap_content">
</androidx.appcompat.widget.Toolbar>

<androidx.recyclerview.widget.RecyclerView
android:layout_below="@id/toolbar"
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />

</RelativeLayout>


Create a layout resource file named list_item.xml and write the following xml code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:orientation="vertical"
android:paddingLeft="5dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="2dp">
<TextView
android:id="@+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_toLeftOf="@+id/btnMore"
android:text="Sample title"
android:textColor="@android:color/black"
android:textSize="18dp" />
<Button
android:id="@+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="more"
android:textSize="12dp"
android:textColor="#b255f5" />

</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal" />
</LinearLayout>
Now Create a  new layout resource file for single Item named as list_single_item.xml and write the following xml code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:cardCornerRadius="5dp"
app:cardUseCompatPadding="true">

<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="?android:selectableItemBackground"
android:orientation="vertical">

<ImageView
android:id="@+id/itemImage"
android:layout_width="120dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:src="@drawable/movie1" />
<TextView
android:id="@+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/itemImage"
android:gravity="center"
android:padding="5dp"
android:text="Sample title"
android:textColor="@android:color/black"
android:textSize="18sp" />
</LinearLayout>

</androidx.cardview.widget.CardView>

Create Recyclerview Adapter:-

Create a new class named RecylerViewDataAdapter.java for entire layout or multiple recylerview and write the following code.

RecylerViewDataAdapter class which extends RecyclerView.Adapter class and overrided methods ,create a constructor for getting the data from Activity. The onCreateViewHolder Method in which we inflate the layout item xml and pass it to View Holder and other is onBindViewHolder in which we set the data in the view’s with the help of ViewHolder.

package com.androidcreation.multiplerecyclerview;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class RecyclerViewDataAdapter extends RecyclerView.Adapter<RecyclerViewDataAdapter.ItemRowHolder> {

private ArrayList<MultipleDataModel> dataList;
private Context mContext;

public RecyclerViewDataAdapter(Context context, ArrayList<MultipleDataModel> dataList) {
this.dataList = dataList;
this.mContext = context;
}

@Override public ItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item, null);
ItemRowHolder mh = new ItemRowHolder(v);
return mh;
}

@Override
public void onBindViewHolder(ItemRowHolder itemRowHolder, int i) {
final String sectionName = dataList.get(i).getHeaderTitle();
ArrayList singleSectionItems = dataList.get(i).getAllItemsInSection();
itemRowHolder.itemTitle.setText(sectionName);
SectionListDataAdapter itemListDataAdapter = new SectionListDataAdapter(mContext, singleSectionItems);
itemRowHolder.recycler_view_list.setHasFixedSize(true);
itemRowHolder.recycler_view_list.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
itemRowHolder.recycler_view_list.setAdapter(itemListDataAdapter);
itemRowHolder.btnMore.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), "click event on more, "+sectionName , Toast.LENGTH_SHORT).show();
}
});
}

@Override public int getItemCount() {
return (null != dataList ? dataList.size() : 0);
}

public class ItemRowHolder extends RecyclerView.ViewHolder {
protected TextView itemTitle;
protected RecyclerView recycler_view_list;
protected Button btnMore;
public ItemRowHolder(View view) {
super(view);
this.itemTitle = (TextView) view.findViewById(R.id.itemTitle);
this.recycler_view_list = (RecyclerView) view.findViewById(R.id.recycler_view_list);
this.btnMore= (Button) view.findViewById(R.id.btnMore);
}
}
}

Create ReclyclerView Adapter:-

create a new class named RecylerViewDataAdapter.java for entire layout or multiple recylerview and write the following code.
RecylerViewDataAdapter.java which extends RecyclerView.Adapter class and overrided methods ,create a constructor for getting the data from Activity. The onCreateViewHolder Method in which we inflate the layout item xml and pass it to View Holder and other is onBindViewHolder in which we set the data in the view’s with the help of ViewHolder.
package com.androidcreation.multiplerecyclerview;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class RecyclerViewDataAdapter extends RecyclerView.Adapter<RecyclerViewDataAdapter.ItemRowHolder> {

private ArrayList<MultipleDataModel> dataList;
private Context mContext;

public RecyclerViewDataAdapter(Context context, ArrayList<MultipleDataModel> dataList) {
this.dataList = dataList;
this.mContext = context;
}

@Override public ItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item, null);
ItemRowHolder mh = new ItemRowHolder(v);
return mh;
}

@Override
public void onBindViewHolder(ItemRowHolder itemRowHolder, int i) {
final String sectionName = dataList.get(i).getHeaderTitle();
ArrayList singleSectionItems = dataList.get(i).getAllItemsInSection();
itemRowHolder.itemTitle.setText(sectionName);
SectionListDataAdapter itemListDataAdapter = new SectionListDataAdapter(mContext, singleSectionItems);
itemRowHolder.recycler_view_list.setHasFixedSize(true);
itemRowHolder.recycler_view_list.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
itemRowHolder.recycler_view_list.setAdapter(itemListDataAdapter);
itemRowHolder.btnMore.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), "click event on more, "+sectionName , Toast.LENGTH_SHORT).show();
}
});
}

@Override public int getItemCount() {
return (null != dataList ? dataList.size() : 0);
}

public class ItemRowHolder extends RecyclerView.ViewHolder {
protected TextView itemTitle;
protected RecyclerView recycler_view_list;
protected Button btnMore;
public ItemRowHolder(View view) {
super(view);
this.itemTitle = (TextView) view.findViewById(R.id.itemTitle);
this.recycler_view_list = (RecyclerView) view.findViewById(R.id.recycler_view_list);
this.btnMore= (Button) view.findViewById(R.id.btnMore);
}
}
}
Now we need  another  RecyclerView Adapter for single Single Data. So just create a new class named SectionListDataAdapter.java and write the following code.
package com.androidcreation.multiplerecyclerview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class SectionListDataAdapter extends RecyclerView.Adapter<SectionListDataAdapter.SingleItemRowHolder> {

private ArrayList<SingleDataModel> itemsList;
private Context mContext;

public SectionListDataAdapter(Context context, ArrayList<SingleDataModel> itemsList) {
this.itemsList = itemsList;
this.mContext = context;
}

@Override public SingleItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_single_item, null);
SingleItemRowHolder mh = new SingleItemRowHolder(v);

return mh;
}

@Override public void onBindViewHolder(SingleItemRowHolder holder, int i) {

SingleDataModel singleItem = itemsList.get(i);

holder.tvTitle.setText(singleItem.getName());
holder.itemImage.setImageResource(singleItem.getUrl());

}

@Override public int getItemCount() {
return (null != itemsList ? itemsList.size() : 0);
}

public class SingleItemRowHolder extends RecyclerView.ViewHolder {
protected TextView tvTitle;
protected ImageView itemImage;

public SingleItemRowHolder(final View view) {
super(view);
this.tvTitle = (TextView) view.findViewById(R.id.tvTitle);
this.itemImage = (ImageView) view.findViewById(R.id.itemImage);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), tvTitle.getText(), Toast.LENGTH_SHORT).show();
}
});
}
}
}


Setting Recyclerview in MainActivity

Finally, in the MainActivity.java class, add the following code.

package com.androidcreation.multiplerecyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.view.MenuItem;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

public ArrayList<MultipleDataModel> allSampleData= new ArrayList<MultipleDataModel>();

int[][] img={{R.drawable.movie1,R.drawable.movie2,R.drawable.movie3,R.drawable.movie4},{R.drawable.movie5,R.drawable.movie6,R.drawable.movie7,R.drawable.movie8}
,{R.drawable.movie9,R.drawable.movie10,R.drawable.movie11,R.drawable.movie12},{R.drawable.movie13,R.drawable.movie14,R.drawable.movie15,R.drawable.movie16}};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar_member = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar_member);
getSupportActionBar().setTitle("Multiple RecyclerView");
createDummyData();
RecyclerView my_recycler_view = (RecyclerView)findViewById(R.id.my_recycler_view);
my_recycler_view.setHasFixedSize(true);
RecyclerViewDataAdapter adapter = new RecyclerViewDataAdapter(getApplicationContext(), allSampleData);
my_recycler_view.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false));
my_recycler_view.setAdapter(adapter);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
finish();
break;
}
return super.onOptionsItemSelected(item);
}
public void createDummyData() {

for (int i = 1; i <4; i++) {
MultipleDataModel dm = new MultipleDataModel();
if(i==1) dm.setHeaderTitle("Header 1" );
if (i==2) dm.setHeaderTitle("Header 2");
if(i==3) dm.setHeaderTitle("Header 3");
if (i==4) dm.setHeaderTitle("Header 4 ");
ArrayList<SingleDataModel> singleItem = new ArrayList<SingleDataModel>();
for (int j = 0; j <4; j++) {
singleItem.add(new SingleDataModel("Movie " + j, img[i][j]));
}
dm.setAllItemsInSection(singleItem);
allSampleData.add(dm);
}
}
}

Output:-

0 CommentsClose Comments

Leave a comment

shares

Newsletter Subscribe

Get the Latest Posts & Articles in Your Email

We Promise Not to Send Spam:)