Search code examples
androidandroid-viewpagerandroid-constraintlayoutandroid-nestedscrollview

View with ViewPager not vertically scrollable in ScrollView


This feels like a no brainer but somehow I'm stuck. The view won't allow me to scroll it. It's as if the height of the fragment inflated in the ViewPager doesn't get calculated. Searching SO suggest I need to write my own ViewPager and override onMeasure(), but I can't believe I would have to go that far for something as simple as this.

Here is my layout, somewhat simplified for convenience. The ViewPager is populated with fragments taking up space way beyond the screen (vertically). Still, nothing on the screen is scrollable. Why is that?

<ScrollView
    android:id="@+id/scroll_view"
    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:fillViewport="true">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="0dp"
            android:layout_height="170dp"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:id="@+id/title_text_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/header_image_view"/>

        <Button
            android:id="@+id/resume_training_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/title_text_view"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/lesson_table_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"          
            app:layout_constraintTop_toBottomOf="@id/resume_training_button">
        </android.support.design.widget.TabLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/lesson_table_layout">
        </android.support.v4.view.ViewPager>
    </android.support.constraint.ConstraintLayout>
</ScrollView>

Here's an example view. The Lorem ipsum text continues for long, and I'm expecting the whole screen to be scrollable, but it isn't.

example_view

Thanks in advance!


Solution

  • I ended up rewriting it quite a bit. It didn't make sense to scroll above the TabLayout so I ended up using a CoordinatorLayout, according to

    <CoordinatorLayout>        <-- width/height = match_parent
        <AppBarLayout>         <-- width = match_parent, height = wrap_content
            <ImageView/>
            <TextView/>
            <Button/>
            <TabLayout/>
        <AppBarLayout/>
        <ViewPager/>           <-- width/height = match_parent, app:layout_behavior="@string/appbar_scrolling_view_behavior"
    <CoordinatorLayout/>
    

    And each fragment inserted in the ViewPager is now wrapped in a NestedScrollView.

    Thanks for the other answers. It'll probably help someone else!