Enable scrolling inside a Fragment that uses TabLayout and ViewPager

Question

Hello! I want this view to be scrollable:

As you can see, the "TEMP CONTENT" in TAB1 is just there to simulate temporary content that may come up.

What I want to do now is to make the whole page scrollable. What I managed to do is to make the content of TAB1, so, the content of the TabLayout, scrollable, but that's not that what I want to do. As described, the whole page should be.

That is the Layout that is holding the view:

<?xml version="1.0" encoding="utf-8"?>

    <LinearLayout 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="at.codecrane.whosnext.MainActivity">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@android:color/darker_gray" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="100dp"
                android:layout_height="100dp"
                app:srcCompat="@drawable/ic_face"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="32dp" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/imageView3"
                android:layout_centerHorizontal="true"
                android:text="Temp Name"
                android:textSize="18sp" />
        </RelativeLayout>



        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@color/colorPrimary">

                <android.support.design.widget.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="General" />

                <android.support.design.widget.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Statistics" />

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

        </android.support.v4.view.ViewPager>
    </LinearLayout>

And this is the fragment-layout for the ViewPager- Content:

<!-- TODO: Update blank fragment layout -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEMP CONTET"
        android:textSize="20dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEMP CONTET"
        android:textSize="20dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEMP CONTET"
        android:textSize="20dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEMP CONTET"
        android:textSize="20dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEMP CONTET"
        android:textSize="20dp" />
</LinearLayout>

Thanks in advance!

Answer 1

Use Scrollview and NestedScrollview Together.

here is an example Code

1. use NestedScrollview in your View pager fragment.

2. For your activity layout add Scrollview as root tag and add android:fillViewport="true"