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

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1212
Zoom In and Out to TextView in Android
0 413
How to underline text in textview
0 342
Shine Effect in Android
0 293
How to Create Marquee Text in Android?
0 264
Our blogs
Archive