android scrolling full RelativeLayout instead of only RecyclerView

Question

I have a RelativeLayout in an Android activity, which contains data for a book description (as you can figure out: title, image, summary, author...)

At the bottom of the layout, I have set a RecyclerView for display comments from user (thumbnail, nick, date and comment).

Everything works fine, but when I have many comments, I only can scroll the RecyclerView, not the whole RelativeLayout. In a simplified way: here is my layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_book_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE">
<com.facebook.drawee.view.SimpleDraweeView
     android:id="@+id/bookDetailThumbnail"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     fresco:placeholderImage="@drawable/not_available_thumbnail"
     fresco:failureImage="@drawable/not_available_thumbnail"
     fresco:actualImageScaleType="centerCrop"
     />


<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bookDetailTitle"
    android:textAlignment="center"
    android:textSize="40dp"
    android:layout_below="@id/bookDetailThumbnail"
    android:text="titulo"/>
<TextView
    android:layout_width="96dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/bookDetailTitle"
    android:id="@+id/writtenByFieldName"
    android:text="@string/written_by"/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/summaryText"
    android:layout_below="@id/writtenByFieldName"
    android:layout_centerHorizontal="true"/>
<TextView
    android:layout_width="96dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/summaryText"
    android:id="@+id/publishedOnFieldName"
    android:text="@string/published_on"/>
<TextView
    android:layout_width="96dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/publishedOnFieldName"
    android:id="@+id/ratingFieldName"
    android:text="@string/rating_of_users"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/bookDetailVersion"
    android:layout_below="@id/ratingFieldName"
    android:text="version"/>

<ProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:src="@drawable/loading_icon"
    android:id="@+id/comments_loading_icon"
    android:layout_below="@id/bookDetailVersion"
    android:indeterminate="true" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/comments_loading_icon"
    android:id="@+id/loading_comments_text"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/loading_comments_text"/>

<android.support.v7.widget.RecyclerView
    android:id="@+id/commentsList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/bookDetailVersion"
    android:visibility="invisible"/>

Initially I though I should use ScrollView, but as it is mentioned in official Google documentation about ScrollView: Never add a RecyclerView or ListView to a scroll view. Doing so results in poor user interface performance and a poor user experience

So, how can I do it to scroll the full Relative layout when scrolling the comments of users?

Answer 1

You can add a NestedScrollView that contain all your layout.

In this example both the image and list items scroll together.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <ImageView
            android:id="@id/cover"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:contentDescription="@string/app_name"/>

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/cover" />
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>