Nested RecyclerView in Android

A nested RecyclerView implements a RecyclerView within a RecyclerView. A variety of apps, including the Play Store, use such a structure, with the outer (parent) RecyclerView being vertical and the inner (child) RecyclerViews being horizontal.

In this article, you will learn how to create your nested RecyclerView Example of nested RecyclerView​ in Android. So let’s take example of nested RecyclerView  activity codes  in Android of Mobile application.  

 Example of nested RecyclerView

                                            

Step-by-Step Im​plementation 

​Step 1: Create a New Project in Android ​studio (File >new  project).  


Step 2: Create an childItemAdapter.java file in your layout folder 

Implement the same in​voke the following code inside childItemAdapter.java file.

 import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class ChildItemAdapter
extends RecyclerView
.Adapter<ChildItemAdapter.ChildViewHolder> {

private List<ChildItem> ChildItemList;

ChildItemAdapter(List<ChildItem> childItemList)
{
this.ChildItemList = childItemList;
}

@NonNull
@Override
public ChildViewHolder onCreateViewHolder(
@NonNull ViewGroup viewGroup,
int i)
{

View view = LayoutInflater
.from(viewGroup.getContext())
.inflate(
R.layout.child_item,
viewGroup, false);

return new ChildViewHolder(view);
}

@Override
public void onBindViewHolder(
@NonNull ChildViewHolder childViewHolder,
int position)
{

ChildItem childItem
= ChildItemList.get(position);

childViewHolder
.ChildItemTitle
.setText(childItem.getChildItemTitle());
}

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

class ChildViewHolder
extends RecyclerView.ViewHolder {

TextView ChildItemTitle;

ChildViewHolder(View itemView)
{
super(itemView);
ChildItemTitle
= itemView.findViewById(
R.id.child_item_title);
}
}
}

Step 3: Create an child_item.xml file in your layout folder . path (res>layout)

Implement the same in​voke the following code inside child_item.xml file.  

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/img_child_item"
android:layout_width="100dp"
android:src="@drawable/company_logo"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_marginStart="5dp" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_toEndOf="@id/img_child_item"
android:padding="12dp"
android:layout_below="@+id/img_child_item"
android:layout_alignParentStart="true"
android:orientation="vertical">

<TextView
android:id="@+id/child_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
/>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>

</FrameLayout>
Step 4: Create an ParentItemAdapter.java file in your layout folder 

Implement the same in​voke the following code inside ParentItemAdapter.java file.

 import androidx.annotation.NonNull;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class ParentItemAdapter
extends RecyclerView
.Adapter<ParentItemAdapter.ParentViewHolder> {

private RecyclerView.RecycledViewPool
viewPool
= new RecyclerView
.RecycledViewPool();
private List<ParentItem> itemList;

ParentItemAdapter(List<ParentItem> itemList)
{
this.itemList = itemList;
}

@NonNull
@Override
public ParentViewHolder onCreateViewHolder(
@NonNull ViewGroup viewGroup,
int i)
{

View view = LayoutInflater
.from(viewGroup.getContext())
.inflate(
R.layout.parent_item,
viewGroup, false);

return new ParentViewHolder(view);
}

@Override
public void onBindViewHolder(
@NonNull ParentViewHolder parentViewHolder,
int position)
{


ParentItem parentItem
= itemList.get(position);
parentViewHolder
.ParentItemTitle
.setText(parentItem.getParentItemTitle());
LinearLayoutManager layoutManager
= new LinearLayoutManager(
parentViewHolder
.ChildRecyclerView
.getContext(),
LinearLayoutManager.HORIZONTAL,
false);
layoutManager
.setInitialPrefetchItemCount(
parentItem
.getChildItemList()
.size());
ChildItemAdapter childItemAdapter
= new ChildItemAdapter(
parentItem
.getChildItemList());
parentViewHolder
.ChildRecyclerView
.setLayoutManager(layoutManager);
parentViewHolder
.ChildRecyclerView
.setAdapter(childItemAdapter);
parentViewHolder
.ChildRecyclerView
.setRecycledViewPool(viewPool);
}


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


class ParentViewHolder
extends RecyclerView.ViewHolder {
private TextView ParentItemTitle;
private RecyclerView ChildRecyclerView;
ParentViewHolder(final View itemView)
{
super(itemView);
ParentItemTitle
= itemView
.findViewById(
R.id.parent_item_title);
ChildRecyclerView
= itemView
.findViewById(
R.id.child_recyclerview);
}
}
}

 

Step 5: Create an parent_item.xml file in your layout folder . path (res>layout) 

Implement the same in​voke the following code inside parent_item.xml file.  

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

<TextView
android:id="@+id/parent_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12sp"
android:textSize="18sp" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:orientation="horizontal">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/child_recyclerview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Step 6: Create an childItem.java file in your layout folder

Implement the same in​voke the following code inside childItem.java file.

 public class ChildItem {
private String ChildItemTitle;

public ChildItem(String childItemTitle)
{
this.ChildItemTitle = childItemTitle;
}

public String getChildItemTitle()
{
return ChildItemTitle;
}

public void setChildItemTitle(
String childItemTitle)
{
ChildItemTitle = childItemTitle;
}
}
Step 7: Create an ParentItem.java file in your layout folder

Implement the same in​voke the following code inside ParentItem.java file.

import java.util.List;

public class ParentItem {

private String ParentItemTitle;
private List<ChildItem> ChildItemList;

public ParentItem(
String ParentItemTitle,
List<ChildItem> ChildItemList)
{

this.ParentItemTitle = ParentItemTitle;
this.ChildItemList = ChildItemList;
}


public String getParentItemTitle()
{
return ParentItemTitle;
}

public void setParentItemTitle(
String parentItemTitle)
{
ParentItemTitle = parentItemTitle;
}

public List<ChildItem> getChildItemList()
{
return ChildItemList;
}

public void setChildItemList(
List<ChildItem> childItemList)
{
ChildItemList = childItemList;
}
}
Step 8: Create an MainActivity.java file in your layout folder

Implement the same in​voke the following code inside MainActivity.java file.

 import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView


class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main3)
val ParentRecyclerViewItem = findViewById<RecyclerView>(
R.id.parent_recyclerview
)

val layoutManager = LinearLayoutManager(
this@MainActivity2
)

val parentItemAdapter = ParentItemAdapter(
ParentItemList()
)

ParentRecyclerViewItem.adapter = parentItemAdapter
ParentRecyclerViewItem.layoutManager = layoutManager
}
private fun ParentItemList(): List<ParentItem> {
val itemList
: MutableList<ParentItem> = ArrayList()

val item = ParentItem(
"Title 1",
ChildItemList()
)
itemList.add(item)
val item1 = ParentItem(
"Title 2",
ChildItemList()
)
itemList.add(item1)

return itemList
}


private fun ChildItemList(): List<ChildItem> {
val ChildItemList
: MutableList<ChildItem> = ArrayList()
ChildItemList.add(ChildItem("Card 1"))
ChildItemList.add(ChildItem("Card 2"))
ChildItemList.add(ChildItem("Card 3"))
ChildItemList.add(ChildItem("Card 4"))
return ChildItemList
}
}

Step 9 : Output of above example.

                                                                                       Happy coding!


365Bloggy July 24, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive