Develop a Multiple Horizontal Scroll with Vertical Scroll Within Single Screen Like Google Play Store

Hi guys after long time I comeback with a new post I hope it will be helpful for beginners and experienced android developers. Generally Android Developers got app requirement to develop multiple horizontal scroll view in single screen with vertical scroll like Google Play Store. Now a days it becomes trend to develop video streaming songs and movies apps like Netflix so, it's become popular view now. Now i'm going to explain how to develop view like Google Play Store. Also I will share the complete code in this app. In this blog I created a local JSON file in assets folder which stores all data in JSON formate latter which I parse in file MainActivity.java so, that developer no need worry to how to display parsed data through network call. If you want to display data from string array in string.xml then there is a blog (Create a Vertical Scroll and Horizontal Scroll App like Google Play Store) is already exist. I also follow this blog to create this blog. First create an android project in android studio. After create project add two dependencies of RecyclerView and CardView in build.gradle file which will be implemented later in the project.

build.gradle

compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
compile 'com.android.support:cardview-v7:26.0.0-alpha1'

After adding dependencies never forgot to sync your project to avoid error. After that create two folder for model and adapter class within package. Create two model class in model folder SectionDataModel.java and SingleItemModel and generate Getter and Setter method.

SingleItemModel.java

package com.kit.googleplaystoresample.model;

import java.io.Serializable;

public class SingleItemModel implements Serializable {
    public String getSubcategory_id() {
        return subcategory_id;
    }

    public void setSubcategory_id(String subcategory_id) {
        this.subcategory_id = subcategory_id;
    }

    public String getSubcategory_name() {
        return subcategory_name;
    }

    public void setSubcategory_name(String subcategory_name) {
        this.subcategory_name = subcategory_name;
    }

    public SingleItemModel(String subcategory_id, String subcategory_name) {
        this.subcategory_id = subcategory_id;
        this.subcategory_name = subcategory_name;
    }

    private String subcategory_id, subcategory_name;

    public SingleItemModel() {

    }


}

SectionDataModel.java

package com.kit.googleplaystoresample.model;

import java.io.Serializable;
import java.util.ArrayList;

public class SectionDataModel implements Serializable {
    private String headerTitle;
    private ArrayList allItemInSection;

    public SectionDataModel() {
    }

    public SectionDataModel(String headerTitle, ArrayList allItemInSection) {
        this.headerTitle = headerTitle;
        this.allItemInSection = allItemInSection;
    }

    public String getHeaderTitle() {
        return headerTitle;
    }

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

    public ArrayList getAllItemInSection() {
        return allItemInSection;
    }

    public void setAllItemInSection(ArrayList allItemInSection) {
        this.allItemInSection = allItemInSection;
    }
}

After that create two adapter RecyclerViewDataAdapter.java and SectionListDataAdapter.java in adapter folder.

RecyclerViewDataAdapter.java

package com.kit.googleplaystoresample.adapter;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SnapHelper;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

import com.github.rubensousa.gravitysnaphelper.GravitySnapHelper;
import com.kit.googleplaystoresample.MoreItemActivity;
import com.kit.googleplaystoresample.R;
import com.kit.googleplaystoresample.model.SectionDataModel;

import java.io.Serializable;
import java.util.ArrayList;

public class RecyclerViewDataAdapter extends RecyclerView.Adapter{

    private ArrayList dataList;
    private Context mContext;
    private RecyclerView.RecycledViewPool recycledViewPool;
    private SnapHelper snapHelper;

    public RecyclerViewDataAdapter(ArrayList dataList, Context mContext) {
        this.dataList = dataList;
        this.mContext = mContext;
        recycledViewPool = new RecyclerView.RecycledViewPool();
    }

    @Override
    public ItemRowHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, null);
        ItemRowHolder rowHolder = new ItemRowHolder(v);
        snapHelper = new GravitySnapHelper(Gravity.START);
        return rowHolder;
    }

    @Override
    public void onBindViewHolder(ItemRowHolder holder, final int position) {
        final String sectionName = dataList.get(position).getHeaderTitle();
     final    ArrayList singleSectionItems = dataList.get(position).getAllItemInSection();
        holder.itemTitle.setText(sectionName);
        SectionListDataAdapter adapter = new SectionListDataAdapter(singleSectionItems, mContext);
        holder.recyclerView.setHasFixedSize(true);
        holder.recyclerView.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
        holder.recyclerView.setAdapter(adapter);
        holder.recyclerView.setRecycledViewPool(recycledViewPool);
        snapHelper.attachToRecyclerView(holder.recyclerView);
        holder.btnMore.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Bundle args = new Bundle();
                args.putSerializable("ARRAYLIST",(Serializable)singleSectionItems);

                Intent intent=new Intent(mContext, MoreItemActivity.class);
                intent.putExtra("sectionname",sectionName);
                intent.putExtra("BUNDLE",args);
               mContext.startActivity(intent);
            }
        });
    }

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

    public class ItemRowHolder extends RecyclerView.ViewHolder {
        protected TextView itemTitle;
        protected RecyclerView recyclerView;
        protected Button btnMore;

        public ItemRowHolder(View itemView) {
            super(itemView);
            this.itemTitle = itemView.findViewById(R.id.itemTitle);
            this.recyclerView = itemView.findViewById(R.id.recycler_view_list);
            this.btnMore = itemView.findViewById(R.id.btnMore);
        }
    }
}

SectionListDataAdapter.java

package com.kit.googleplaystoresample.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
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 com.kit.googleplaystoresample.R;
import com.kit.googleplaystoresample.model.SingleItemModel;

import java.util.ArrayList;

public class SectionListDataAdapter extends RecyclerView.Adapter{

    private ArrayList itemModels;
    private Context mContext;

    public SectionListDataAdapter(ArrayList itemModels, Context mContext) {
        this.itemModels = itemModels;
        this.mContext = mContext;
    }

    @Override
    public SingleItemRowHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_single_card, null);
        SingleItemRowHolder singleItemRowHolder = new SingleItemRowHolder(v);
        return singleItemRowHolder;
    }

    @Override
    public void onBindViewHolder(SingleItemRowHolder holder, int position) {
        SingleItemModel itemModel = itemModels.get(position);
        holder.tvTitle.setText(itemModel.getSubcategory_name());
    }

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

    public class SingleItemRowHolder extends RecyclerView.ViewHolder {

        protected TextView tvTitle;
        protected ImageView itemImage;

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

}

SectionMoreListDataAdapter.java

package com.kit.googleplaystoresample.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
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 com.kit.googleplaystoresample.R;
import com.kit.googleplaystoresample.model.SingleItemModel;

import java.util.ArrayList;

public class SectionMoreListDataAdapter extends RecyclerView.Adapter{

    private ArrayList itemModels;
    private Context mContext;

    public SectionMoreListDataAdapter(ArrayList itemModels, Context mContext) {
        this.itemModels = itemModels;
        this.mContext = mContext;
    }

    @Override
    public SectionMoreListDataAdapter.SingleItemRowHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.more_list_data, null);
        SectionMoreListDataAdapter.SingleItemRowHolder singleItemRowHolder = new SectionMoreListDataAdapter.SingleItemRowHolder(v);
        return singleItemRowHolder;
    }

    @Override
    public void onBindViewHolder(SectionMoreListDataAdapter.SingleItemRowHolder holder, int position) {
        SingleItemModel itemModel = itemModels.get(position);
        holder.tvTitle.setText(itemModel.getSubcategory_name());
    }

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

    public class SingleItemRowHolder extends RecyclerView.ViewHolder {

        protected TextView tvTitle;
        protected ImageView itemImage;

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

}

MainActivity.java

package com.kit.googleplaystoresample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;

import com.kit.googleplaystoresample.adapter.RecyclerViewDataAdapter;
import com.kit.googleplaystoresample.model.SectionDataModel;
import com.kit.googleplaystoresample.model.SingleItemModel;

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

import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {

    private ArrayList allSampleData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        allSampleData = new ArrayList<>();

        getJsonData();

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        recyclerView.setHasFixedSize(true);
        RecyclerViewDataAdapter adapter = new RecyclerViewDataAdapter(allSampleData, this);
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        recyclerView.setAdapter(adapter);
    }


    private void getJsonData() {


        try {
            JSONObject obj = new JSONObject(loadJSONFromAsset());
            JSONArray m_jArry = obj.getJSONArray("category_list");
            ArrayList> formList = new ArrayList>();
            HashMap m_li;

            for (int i = 0; i < m_jArry.length(); i++) {
                JSONObject jo_inside = m_jArry.getJSONObject(i);

                String category_name = jo_inside.getString("category_name");
                JSONArray subcat_jArry = jo_inside.getJSONArray("subcategory");
                SectionDataModel dm = new SectionDataModel();
                dm.setHeaderTitle(category_name);


                ArrayList singleItemModels = new ArrayList<>();
                for (int j = 0; j 

MoreItemActivity.java

package com.kit.googleplaystoresample;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.MenuItem;


import com.kit.googleplaystoresample.adapter.SectionMoreListDataAdapter;
import com.kit.googleplaystoresample.model.SingleItemModel;

import java.util.ArrayList;

public class MoreItemActivity extends AppCompatActivity {

    RecyclerView recycler_view_morelist;
    String itemname;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_more_item);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        recycler_view_morelist=(RecyclerView)findViewById(R.id.recycler_view_morelist);

        Intent intent=getIntent();
        itemname=intent.getExtras().getString("sectionname");
        Bundle args = intent.getBundleExtra("BUNDLE");
        ArrayList singleSectionItems = (ArrayList) args.getSerializable("ARRAYLIST");
        setTitle(itemname);

        RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(this, 2);
        recycler_view_morelist.setLayoutManager(mLayoutManager);
        SectionMoreListDataAdapter adapter = new SectionMoreListDataAdapter(singleSectionItems, this);
        recycler_view_morelist.setHasFixedSize(true);
        recycler_view_morelist.setAdapter(adapter);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                // todo: goto back activity from here
                finish();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}



activity_main.xml



    



list_item.xml



    

        

            

            

        

    



list_single_item.xml




    

        

        

    



activity_more_item.xml



    


more_list_data.xml