How to make Play Store Like Layout in Android Studio | Nested RecyclerView | Android Studio Tutorials

How to make Play Store Like Layout in Android Studio | Nested RecyclerView | Android Studio Tutorials


Introduction :    

We'll learn how to implement Nested RecyclerView  in Android Studio. If you want a look similar to Google Play Store then follow the following steps.

First of all, we must know how to implement RecyclerView. If you don't know how to implement basic recycler view in android studio then follow this link.

Now, if we simplify the Nested RecyclerView it is nothing but one recycler view inside another recycler view.

So, let's divide our Nested RecyclerView in 2 parts
  • The parent RecyclerView.
  • The Child RecyclerView.
Let's implement our Parent RecyclerView.

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
        android:id="@+id/rv_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>


Parent_Adapter.java

package com.example.tutorialspecial;

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

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class Parent_Adapter extends RecyclerView.Adapter<Parent_Adapter.Holder> {

    ArrayList<Model> list;
    Context context;

    public Parent_Adapter(ArrayList<Model> list, Context context) {
        this.list = list;
        this.context = context;
    }

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

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {
        
    }

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

    public class Holder extends RecyclerView.ViewHolder{


        private RecyclerView rv_child;


        public Holder(@NonNull View itemView) {
            super(itemView);
            rv_child = itemView.findViewById(R.id.rv_child);
        }
    }
}

MainActivity.java

package com.example.tutorialspecial;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.AuthFailureError;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.google.android.material.bottomsheet.BottomSheetDialog;

import org.json.JSONArray;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import jp.co.recruit_lifestyle.android.widget.WaveSwipeRefreshLayout;

public class MainActivity extends AppCompatActivity {

    ArrayList<Model> dataList = new ArrayList<>();
    RecyclerView rv_parent;
    Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        rv_parent = findViewById(R.id.rv_parent);
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        dataList.add(new Model("",""));
        Parent_Adapter adapter = new Parent_Adapter(dataList,context);
        rv_parent.setLayoutManager(new GridLayoutManager(context,1));
        rv_parent.setAdapter(adapter);

    }


}

item_parent.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_marginBottom="15dp"
    android:layout_height="wrap_content">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/rv_child"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Here as you can see this is nothing but simple basic RecyclerView but as discussed above we have to add a RecyclerView inside another that's why we have added a RecyclerView in item_parent.xml and bind it's id in our Parent_Adapter.java 

We'll come back to our Parent RecylerView Later let's create our Child RecyclerView first.

Child_Adapter.java

package com.example.tutorialspecial;

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

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class Child_Adapter extends RecyclerView.Adapter<Child_Adapter.Holder> {

    ArrayList<Model> list;
    Context context;

    public Child_Adapter(ArrayList<Model> list, Context context) {
        this.list = list;
        this.context = context;
    }

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

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {

    }

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

    public class Holder extends RecyclerView.ViewHolder{


        public Holder(@NonNull View itemView) {
            super(itemView);
        }
    }
}


item_child.xml

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

    <ImageView
        android:layout_width="100dp"
        android:src="@drawable/watermark"
        android:layout_height="100dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:text="Hello World"
        android:textSize="15sp"
        android:layout_marginTop="3dp"
        android:layout_gravity="center"
        android:textColor="@color/black"
        android:layout_height="wrap_content"/>

</LinearLayout>

We are done with the Child RecyclerView.
Here comes the most important thing, now we have to add Child RecyclerView inside our Parent RecyclerView we can do this by setting our Child Adapter in our Parent_Adapter.java. Let's see how.

Parent_Adapter.java(Updated)

package com.example.tutorialspecial;

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

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class Parent_Adapter extends RecyclerView.Adapter<Parent_Adapter.Holder> {

    ArrayList<Model> list;
    Context context;

    public Parent_Adapter(ArrayList<Model> list, Context context) {
        this.list = list;
        this.context = context;
    }

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

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {
        ArrayList<Model> child_list = new ArrayList<>();
        child_list.add(new Model("",""));
        child_list.add(new Model("",""));
        child_list.add(new Model("",""));
        child_list.add(new Model("",""));
        child_list.add(new Model("",""));
        child_list.add(new Model("",""));
        child_list.add(new Model("",""));
        Child_Adapter adapter = new Child_Adapter(child_list,context);
        holder.rv_child.setLayoutManager(new GridLayoutManager(context,1,RecyclerView.HORIZONTAL,false));
        holder.rv_child.setAdapter(adapter);
    }

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

    public class Holder extends RecyclerView.ViewHolder{


        private RecyclerView rv_child;


        public Holder(@NonNull View itemView) {
            super(itemView);
            rv_child = itemView.findViewById(R.id.rv_child);
        }
    }
}


We have selected Horizontal Orientation of Child RecyclerView because it will slide horizontally and Vertical in Parent because it will scroll vertically.
That's all with the Nested RecyclerView.

Feel free to ask doubts in comment section and give any suggestion.

Post a Comment

1 Comments

  1. Please update the tutorial with data from firebase db.
    Btw it's very much understood

    ReplyDelete