CODEWITHSUNDEEP
androidandroid-viewpagerandroid-constraintlayoutandroid-nestedscrollview
Algar
Algar

Reputation: 5984

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!

Upvotes: 4

Views: 5599

Answers (4)

leiikun
leiikun

Reputation: 273

We have the same layout, I used this with android x android 13 and then I set the height into 0dp and app layout_constraint like this:

    <androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPagerDetails"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@id/aphidsdetailstab"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

Upvotes: 0

Rainmaker
Rainmaker

Reputation: 11130

There is such problem , sometimes the ScrollView and the ViewPager switch focus.

If you have a ViewPager in a ScrollView and you want it always to stay in focus when you touch it and the ScrollView never getting a focus, setting the requestDisallowInterceptTouchEvent does that.

 mViewPager= (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(adapter);
    mViewPager.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            mViewPager.getParent().requestDisallowInterceptTouchEvent(true);
            return false;
        }
    });

Look up more answers in this thread

EDIT:

Another way I see that may work is setting scrolling to your tablayout like this programmatically

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Upvotes: 2

Algar
Algar

Reputation: 5984

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!

Upvotes: 2

Santanu Sur
Santanu Sur

Reputation: 11487

Try nestedScrollView instead of scrollView.. try the following snippet..

<android.support.v4.widget.NestedScrollView 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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@id/fragment_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="fill_vertical"
            android:orientation="vertical">
    ...Content...
     
     <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>
   
     </LinearLayout>
</android.support.v4.widget.NestedScrollView>

Upvotes: 0

Related Questions