How to use RecyclerView with NestedScrollView?

Question

I want to make a scrolling at LinearLayout and disable scrolling from RecyclerView. I tried changing LinearLayout to NestedScrollView but it doesn't work and i don't know why.

I've tried this question but it doesn't work well. The content in RecyclerView can be loaded dynamically from WS and it's an endless scroll. The screen was freezing when content in RecyclerView updated.

I've seen this from Twitter, how can we do this https://drive.google.com/file/d/0B2JZggeoXKKFdG1ENmZEdWFIa0k/view?usp=sharing

Example
This is my simple screen of my app, i want scrolling at red currently, and it currently scrolls at 'blue'. Many thanks.

Code

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:layout_margin="16dp"
    android:background="#CCC"
    android:id="@+id/imageView2" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Image caption"
    android:background="#cbffa3"
    android:padding="16dp"
    android:id="@+id/textView8" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</LinearLayout>

Tried but not work, contents inside RecyclerView not showing

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:layout_margin="16dp"
            android:background="#CCC"
            android:id="@+id/imageView2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Image caption"
            android:background="#cbffa3"
            android:padding="16dp"
            android:id="@+id/textView8" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

Answer 1

Option 1: Use WRAP_CONTENT on RecyclerView and put it in a scroll view along with other widgets. WRAP_CONTENT on RecyclerView works only with 23.2 though. This is not a recommended way as if use WRAP_CONTENT your RecyclerView items won't get recycled and it slow down the UI when the content gets long.

Option 2: Use types for the recycler view adapter and render a different view for index 0. This answer shows how to do it.

Option 3: The best option of achieving this kind of experience is using CollapsingToolbarLayout. Your top content will collapse when you scroll up and you'll be able to scroll the RecyclerView.

Here is one way of replicating the Twitter page with CollapsingToolbarLayout.

<android.support.design.widget.CoordinatorLayout
    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="match_parent"
    android:layout_gravity="center"
    android:fitsSystemWindows="false"
    android:orientation="vertical"
    app:statusBarBackground="@android:color/transparent">


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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="?actionBarSize"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@android:drawable/btn_star_big_on"
                app:layout_collapseMode="none"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="@android:color/transparent"
                android:elevation="5dp"
                android:importantForAccessibility="yes"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="exitUntilCollapsed">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="?actionBarSize"
                    android:layout_centerHorizontal="true"
                    android:layout_gravity="center_horizontal"
                    android:background="@android:color/white"
                    android:text="Title Here"
                    />
            </android.support.v7.widget.Toolbar>

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

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

More about this is in the Android Blog - http://android-developers.blogspot.ca/2015/05/android-design-support-library.html (Scroll to "CoordinatorLayout and the app bar")

Answer 2

I recommend you to add a listener to the scroll view and detect if the user scrolls down, you "hide" the top. The easiest way is to use the default "Scroll Activity" that comes on the default menu when you create a new Activity in Android Studio using Material Design.