Horizontal RecyclerViews inside vertical RecyclerView scrolling jerks

Question

I am using a layout in which I used multiple RecyclerViews (Horizontal) as a item view of RecyclerView. The problem is that the vertical scrolling is not as smooth as I am expecting.There are some jerks in while scrolling vertically(Parent RecyclerView).

How to remove these vertical scrolling jerks ? I used to set adapters to horizontal RecyclerViews in OnBindViewHolder() method of Parent RecyclerView.

Answer 1

I have solved the problem.

Scrolling performance is much better in this case.

Do not set adapters to horizontal RecyclerViews in OnBindViewHolder() method of Parent RecyclerView.

Instead of it set it at very first time when the view is created via onCreateViewHolder() of RecyclerView with empty or null dataList.

Just replace the new secondary data list with previous null list at onBindViewHolder() and call notifydataSetChanged() to HorizontalAdapetr.

This is much better than setAdapter() in onBindViewHolder().

Answer 2

You can try this way

main activity

public void initialize(List<List<ResponseObject>> responseObjectList) {
    RecyclerView upperRecyclerView = (RecyclerView) this.findViewById(R.id.main_layout);
    upperRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
    VerticalAdapter adapter = new VerticalAdapter(this, responseObjectLists);
    upperRecyclerView.setAdapter(adapter);
    adapter.notifyDataSetChanged();
}

Vertical recycled view adapter

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

    final private SearchActivity activity;
    List<List<ResponseObject>> list;

    public VerticalAdapter(SearchActivity activity, List<List<ResponseObject>> lists) {
        this.list = lists;
        this.activity = activity;
    }

    public Holder onCreateViewHolder(ViewGroup parent,int viewType) {
        View itemLayoutView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.vertical_layout, null);
        return new Holder(itemLayoutView);
    }

    public void onBindViewHolder(Holder viewHolder, int position) {
        List<ResponseObject> objectList = list.get(position);
        viewHolder.packageTitle.setText(objectList.get(0).getTag());
        ImageAdapter imageAdapter = new ImageAdapter(activity, objectList);
        viewHolder.horizontalRecyclerView.setLayoutManager(new LinearLayoutManager(activity, LinearLayoutManager.HORIZONTAL, false));
        viewHolder.horizontalRecyclerView.setAdapter(imageAdapter);
        viewHolder.horizontalRecyclerView.setNestedScrollingEnabled(false);
        imageAdapter.notifyDataSetChanged();
    }

    public final static class Holder extends RecyclerView.ViewHolder {

        protected TextView packageTitle;
        protected RecyclerView horizontalRecyclerView;

        public Holder(View view) {
            super(view);
            this.packageTitle = (TextView) view.findViewById(R.id.recycleViewTitle);
            this.horizontalRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
            this.horizontalRecyclerView.setLayoutManager(new LinearLayoutManager(this.horizontalRecyclerView.getContext(), LinearLayoutManager.HORIZONTAL, false));
            this.horizontalRecyclerView.setNestedScrollingEnabled(false);
            horizontalRecyclerView.setAdapter(null);
        }
    }

    public int getItemCount() {
        return ListUtil.isEmpty(list) ? 0 : list.size();
    }
}

Horizontal recycleview adapter

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

    private List<ResponseObject> mainPageResponseList;
    private SearchActivity activity;

    public ImageAdapter(SearchActivity activity, List mainPageResponseList) {
        this.mainPageResponseList = mainPageResponseList;
        this.activity = activity;
    }

    public ImageAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemLayoutView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.horizontal_layout_view, null);
        ViewHolder viewHolder = new ViewHolder(itemLayoutView);
        return viewHolder;
    }

    public void onBindViewHolder(ViewHolder viewHolder, int position) {
        ResponseObject object = mainPageResponseList.get(position);
        Util.setImageUsingGlide(object.getImage(), viewHolder.imageView);
        viewHolder.packageName.setText(object.getDestination());
        viewHolder.packagePrice.setText(object.getPrice() + "");
        viewHolder.imageView.setOnClickListener(null);
    }

    public final static class ViewHolder extends RecyclerView.ViewHolder {

        protected ImageView imageView;
        protected TextView packageName;
        protected TextView packagePrice;

        public ViewHolder(View view) {
            super(view);
            this.imageView = (ImageView) view.findViewById(R.id.packageImage);
            this.packageName = (TextView) view.findViewById(R.id.packageName);
            this.packagePrice = (TextView) view.findViewById(R.id.packagePrice);
        }
    }

    public int getItemCount() {
        return ListUtil.isEmpty(mainPageResponseList) ? 0 : mainPageResponseList.size();
    }
}

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="true"> 

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:visibility="visible">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/ivHolidayMainImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />

                <ImageView
                    android:id="@+id/ivHotelImage"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_alignTop="@id/ivHolidayMainImage"
           android:background="@drawable/gradient_from_up_hotel_image" />

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="250dp">
                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true">
                        <TextView
                            android:id="@+id/mainPackageTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Popular Pick"
                            android:textColor="@color/white"
                            android:textSize="12dp" />
                        <TextView
                            android:id="@+id/mainPackageName"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/mainPackageTitle"
                            android:text="Andaman Islands"
                            android:textColor="@color/white"
                            android:textSize="18dp" />
                    </RelativeLayout>
                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_marginLeft="50dp"
                        android:layout_marginRight="10dp">
                        <TextView
                            android:id="@+id/mainPackagePrice"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="25000"
                            android:textColor="@color/white"
                            android:textSize="18dp" />
                        <TextView
                            android:id="@+id/journeyType"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/mainPackagePrice"
                            android:text="Popular Pick"
                            android:textColor="@color/white"
                            android:textSize="12dp" />
                    </RelativeLayout>
                </RelativeLayout>
            </RelativeLayout>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginTop="-100dp"
         android:background="@drawable/gradient_from_down_hotel_image" />
        </app.viaindia.views.ViaLinearLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:src="@drawable/ic_sms_black"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

vertical_layout.xml

<LinearLayout 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_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<TextView
    android:id="@+id/recycleViewTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:text="Beaches"
    android:textColor="@color/black_light"
    android:textSize="20dp" />
<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:layout_gravity="center"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

holizontal_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:viaCustom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/packageImage"
        android:layout_width="wrap_content"
        android:layout_height="230dp"
        android:scaleType="fitXY"
        android:src="@drawable/cheese_1" />
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="160dp">
        <TextView
            android:id="@+id/tvNightAndDays"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="3 Night/4 days"
            android:textColor="@color/white" />
    </RelativeLayout>
</RelativeLayout>