Add Recyclerview in RecyclerViewPager

Question

I added a Recyclerview in one item of RecyclerViewPager(https://github.com/lsjwzh/RecyclerViewPager). And I want to scroll the RecyclerView when I touch on it.

I have tried :

    View.OnTouchListener listener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
                case MotionEvent.ACTION_DOWN:
                    mRecyclerViewPager.requestDisallowInterceptTouchEvent(true);
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    mRecyclerViewPager.requestDisallowInterceptTouchEvent(false);
                    break;
            }
            return false;
        }
    };
    mRecyclerView.setOnTouchListener(listener);

But I can only scroll the RecyclerView sometimes.

I think it can be sloved by implementing NestedScrollingParent in RecyclerViewPager or changing onTouchEvent in RecyclerViewPager .But I'm not familiar with them.

Stricken

are you having RecyclerView inside vertical RecyclerViewPager? – Subtend

Yes.I need to add or remove Item,so I use RecyclerViewPager instead of ViewPager. – Stricken

@tinysunlight hello, are you using the same layout orientation for the RecyclerViewPager and the RecyclerView?? you should use different orientation. You should use the Pager to navigate and the Recycler to scroll in your collection. – Instinct

@Instinct It's the need of product manager.I can't change it. – Stricken

@tinysunlight are you thinking another option or you want to use the RecyclerPagerView as a mandatory solution – Instinct

@Instinct I need to add and remove view in code.ViewPager can't achieve it.So I have no other option. – Stricken

@tinysunlight I will try to do some research with more time. – Instinct

Thinks.I searched some but found no useful thing. – Stricken

Answer 1

I followed the steps to configure and create the simple example using the Github documentation.

Main Activity XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.stackoverflow.recyclerviewstack.MainActivity">

    <com.lsjwzh.widget.recyclerviewpager.RecyclerViewPager
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="1dp"
        android:paddingRight="1dp"
        app:rvp_triggerOffset="0.1"
        app:rvp_singlePageFling="true"
        android:clipToPadding="false"
        />
</RelativeLayout>

Main Activiy class

package com.stackoverflow.recyclerviewstack;

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

import com.lsjwzh.widget.recyclerviewpager.RecyclerViewPager;

public class MainActivity extends AppCompatActivity {

    RecyclerAdapter mAdapter;
    RecyclerViewPager mRecycler;

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

        mRecycler = (RecyclerViewPager) findViewById(R.id.list);

        // setLayoutManager like normal RecyclerView, you do not need to change any thing.
        LinearLayoutManager layout = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        mRecycler.setLayoutManager(layout);

        //set adapter
        //You just need to implements ViewPageAdapter by yourself like a normal RecyclerView.Adpater.
        mAdapter = new RecyclerAdapter(ItemListGenerator.generateCollection(15, "OutItem "));
        mRecycler.setAdapter(mAdapter);
    }
}

RecyclerAdapter

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    List<String> collection;

    public RecyclerAdapter(List<String> collection) {
        this.collection = collection;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        public TextView item;
        RecyclerView mInnerRecycler;

        public ViewHolder(View view) {
            super(view);
            item = (TextView) view.findViewById(R.id.title);
            mInnerRecycler = (RecyclerView) view.findViewById(R.id.innerRecycler);
            LinearLayoutManager layout = new LinearLayoutManager(view.getContext(),
                                                    LinearLayoutManager.HORIZONTAL, false);
            mInnerRecycler.setLayoutManager(layout);
            mInnerRecycler.setAdapter(new InnerAdapter());
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);

        View view = inflater.inflate(R.layout.outer_collection, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        if(position < 0 || position > getItemCount()) return;

        String itemString = collection.get(position);
        holder.item.setText(itemString);

    }

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

the layout use by RecyclerViewPager to create ViewHolder

The ViewHolder use the layout outer_collection:

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

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip"
        android:layout_margin="2dip"
        android:background="@color/colorPrimary"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/innerRecycler"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

The InnerAdapter

public class InnerAdapter extends RecyclerView.Adapter<InnerAdapter.ViewHolder> {


    List<String> collection;

    public InnerAdapter() {
        this.collection = ItemListGenerator.generateCollection(15, "Inner ");
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        public TextView item;

        public ViewHolder(View itemView) {
            super(itemView);
            item = (TextView) itemView.findViewById(R.id.item);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);

        View view = inflater.inflate(R.layout.simple_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        if(position < 0 || position > getItemCount()) return;
        holder.item.setText(collection.get(position));
    }

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

Tip

For the RecyclerViewPager I used this orientation:

 LinearLayoutManager layout = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);

And for the RecyclerView inside this one:

LinearLayoutManager layout = new LinearLayoutManager(view.getContext(), LinearLayoutManager.HORIZONTAL, false);

If you use VERTICAL in the PagerView you can navigate in the horizontal collection or change to HORIZONTAL the PagerView orientation and you can scroll your inside items in the VERTICAL orientation.

You have to evaluate how do you want to use it. I hope this code help with your problem and also to rethink your design. Maybe is not a good practice or UX use the same orientation for both containers. I am not a UX expert.

I will like to be more helpful.

Instinct

I need the same orientation. – Stricken