how to add Horizontal Recyclerview as a header for Vertical Recyclerview?

Question

I need an output like this. That is HorizontalRecyclerView as a header for VerticalRecyclerView.

Currently I'm using NestedScrollView to attain this design. But I felt scrolling is not smooth.

Please suggest any idea. Thanks in advance.

Layout:

<android.support.v4.widget.NestedScrollView
    android:id="@+id/nsv_my_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="ifContentScrolls"
    android:visibility="gone"
    android:clipChildren="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="15dp">

        <LinearLayout
            android:id="@+id/ll_continue_watching"
            android:layout_width="match_parent"
            android:layout_height="132dp"
            android:visibility="gone"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="29dp"
                android:gravity="center_vertical"
                android:paddingLeft="15dp"
                android:paddingRight="15dp">

                <customview.font.TextView
                    android:id="@+id/txt_edit_remove_btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/btn_profile_edit"
                    android:gravity="center"
                    android:paddingTop="2dp"
                    android:text="EDIT"
                    android:textSize="10sp" />

                <customview.font.TextView
                    android:id="@+id/txt_continue_watchng"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_centerVertical="true"
                    android:text="Continue watching"
                    android:textSize="12sp" />

            </RelativeLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:background="@color/horizontal_view_color" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_horizontal_view"
                android:layout_width="match_parent"
                android:layout_height="102dp"
                android:paddingBottom="15dp"
                android:paddingTop="15dp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:background="@color/horizontal_view_color" />
        </LinearLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_vertical_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

Can you explain a bit more why you use RecyclerView for horizontal scrolling at the top. Maybe it would be sufficient to use `TabLayout` ? (https://developer.android.com/reference/android/support/design/widget/TabLayout.html) — Bruno Bieri, Nov 16 '16 at 08:53
and for scrollable tabs see this http://stackoverflow.com/questions/35815615/how-to-make-scrollable-tab-in-android — Vivek Mishra, Nov 16 '16 at 08:54
use TabHost or TabLayout to achieve this.But do not use RecyclerView for this. — Rushi Ayyappa, Nov 16 '16 at 09:00
@BrunoBieri because as a user I can delete items from the list. then immediately i can undo the delete. So I prefer RecyclerView here. — khaleel_jageer, Nov 16 '16 at 09:08
It's not recommended to use a NestedScrollView as the parent of the RecyclerView , because your list will automatically fill the parent and load all the items of the RecyclerView, then as a result, your list gets slow. — Badr, Mar 08 '17 at 13:34

kelmi92 · Answer 1 · 2016-11-16T09:16:14.950

Very simple, your "main" recycler view has 2 kind of cells, the first one, that is another recycler view, and the rest that are "normal" cells.

On the adapter of your "main" recycler view, you have to Override the method getItemViewType, something like this:

 @Override
    public int getItemViewType(int position) {
        if(postition == 0) {
            return 1; //Let's say that you define that 1 is the view type for the recycler view cell
        }
        else {
           return 2; //And 2 is going to be the "normal" cells
        }
    }

Then, on your onCreateViewHolder method, depending on the view type, you must build and return the correct viewHolder, something like this:

    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        if(viewType == 1) {
             View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.your_other_recyclerview_layout, parent, false);
        //build the viewHolder
        ViewHolder vh = new YourOtherRecyclerViewHolder(v);
        return vh;
        }
        else {
            View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.your_normal_cell_layout, parent, false);
            //build the normal viewHolder
            YourNormalViewHolder vh = new YourNormalViewHolder (v);
            return vh;
        }

    }

Of course you must implement 2 classes that extends the ViewHolder class, one for YourOtherRecyclerViewHolder, and the other one for YourNormalViewHolder.

I hope it helps!

Had this idea in mind... But I need some clarification on this. * Can I apply recyclerview & its adpater in this concept? — khaleel_jageer, Nov 16 '16 at 09:05
I do not have access to any code with something similar to this at this moment, but you have some doc whith a full example: https://guides.codepath.com/android/Heterogenous-Layouts-inside-RecyclerView — kelmi92, Nov 16 '16 at 09:13
The only thing that you have to make is replace the image cell with a recycler view cell, but the concept is the same. I hope it helps. — kelmi92, Nov 16 '16 at 09:15

how to add Horizontal Recyclerview as a header for Vertical Recyclerview?

1 Answers1