ScrollView inside ViewPager does not scroll on Android 4.x

Question

I have a problem that seems to only impact Android 4.x versions and may be also device specific (i.e. it does not exist on my Huawei G630@4.3, but do exists on a Samsung Ace2@4.4.4). I have a ScrollView that contains a RelativeLayout that has 4 CardViews. Now on some 4.x devices, the scroll event simply does not happen when I try to scroll beginning from a card. If I touch the small padding between the cards or above the first card (and not between any two) and the device screen, I can scroll the content.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:app="http://schemas.android.com/tools"
                    xmlns:card_view="http://schemas.android.com/apk/res-auto"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="@dimen/activity_horizontal_margin">

        <android.support.v7.widget.CardView
            android:id="@+id/metricsContainerCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:cardElevation="2dp"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="10dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="5dp"
                        android:src="@drawable/metrics"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/metrics"
                        android:textSize="20sp"/>
                </LinearLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/projectCircleBackgroundShadow"/>

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/warningsContainerCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_below="@id/metricsContainerCard"
            app:cardElevation="2dp"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="10dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="5dp"
                        android:src="@drawable/bug_color"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/warnings"
                        android:textSize="20sp"/>
                </LinearLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/projectCircleBackgroundShadow"/>

            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/topWarningsContainerCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/warningsContainerCard"
            android:layout_marginTop="10dp"
            app:cardElevation="2dp"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="10dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="5dp"
                        android:src="@drawable/top_warnings"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/topWarnings"
                        android:textSize="20sp"/>
                </LinearLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/projectCircleBackgroundShadow"/>

            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/topCriticalItemsContainerCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/topWarningsContainerCard"
            android:layout_marginTop="10dp"
            app:cardElevation="2dp"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="10dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="5dp"
                        android:src="@drawable/top_critical_items"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/topCriticalItems"
                        android:textSize="20sp"/>

                </LinearLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/projectCircleBackgroundShadow"/>

            </LinearLayout>
        </android.support.v7.widget.CardView>
    </LinearLayout>
</ScrollView>

There isn't any problem on Android 5.x and 6.x.

EDIT

It seems that problem is not exclusively related to CardView, as I have another layout, and it also does not scroll even when I drag the screen by the custom view:

<ScrollView
    android:id="@+id/scrollView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".projects.details.ProjectDetailsActivity_">

    <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"
                  android:padding="@dimen/activity_horizontal_margin">


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

            <TextView
                android:id="@+id/projectName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:ellipsize="none"
                android:gravity="center_horizontal"
                android:text="Project name"
                android:textSize="24sp"/>

            <c.f.q.a.projects.details.components.widgets.ProjectDetailWidget
                android:id="@+id/projectDetailWidget"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/timelineWrapperLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:id="@+id/qualityTimelineCard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                app:cardElevation="2dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="10dp">

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

                        <ImageView
                            android:id="@+id/flipQualityTimelineButton"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_marginRight="5dp"
                            android:src="@drawable/flip_to_cost"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:ellipsize="end"
                            android:lines="1"
                            android:text="@string/project_timeline_title"
                            android:textSize="16dp"/>
                    </LinearLayout>

                    <ProgressBar
                        android:id="@+id/projectQualityTimelineProgressBar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        />

                    <com.github.mikephil.charting.charts.LineChart
                        android:id="@+id/projectQualityTimeline"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:layout_marginTop="16dp"
                        android:tag="@string/project_chart_tag"
                        android:visibility="gone"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/costTimelineCard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:visibility="gone"
                app:cardElevation="2dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="10dp">

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

                        <ImageView
                            android:id="@+id/flipCostTimelineButton"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:layout_marginRight="5dp"
                            android:src="@drawable/flip_to_quality"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:ellipsize="end"
                            android:lines="1"
                            android:text="@string/project_cost_timeline_title"
                            android:textSize="16dp"/>
                    </LinearLayout>


                    <ProgressBar
                        android:id="@+id/projectCostTimelineProgressBar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        />

                    <com.github.mikephil.charting.charts.LineChart
                        android:id="@+id/projectCostTimeline"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:layout_marginTop="16dp"
                        android:tag="@string/project_chart_tag"
                        android:visibility="gone"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>

        </LinearLayout>

        <android.support.v7.widget.CardView
            android:id="@+id/vcsChangeCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            app:cardElevation="2dp"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:orientation="vertical"
                android:padding="10dp">

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

                    <ImageView
                        android:id="@+id/expandVcsChangeButton"
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:layout_marginRight="5dp"
                        android:src="@drawable/expand_chart"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:text="@string/project_vcschange_title"
                        android:textSize="16sp"/>
                </LinearLayout>

                <ProgressBar
                    android:id="@+id/vcsChangeProgressBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"/>

                <com.github.mikephil.charting.charts.BarChart
                    android:id="@+id/projectVcsChange"
                    android:layout_width="match_parent"
                    android:layout_height="175dp"
                    android:layout_marginTop="16dp"
                    android:tag="@string/project_chart_tag"
                    android:visibility="gone"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/dtnosChangeCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            app:cardElevation="2dp"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:orientation="vertical"
                android:padding="10dp">

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

                    <ImageView
                        android:id="@+id/expandDtnosChangeButton"
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:layout_marginRight="5dp"
                        android:src="@drawable/expand_chart"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:text="@string/project_systemchange_title"
                        android:textSize="16sp"/>
                </LinearLayout>

                <ProgressBar
                    android:id="@+id/dtnosChangeProgressBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"/>

                <com.github.mikephil.charting.charts.BarChart
                    android:id="@+id/projectDtnosChange"
                    android:layout_width="match_parent"
                    android:layout_height="175dp"
                    android:layout_marginTop="16dp"
                    android:tag="@string/project_chart_tag"
                    android:visibility="gone"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:id="@+id/sensorNodeCard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                app:cardElevation="2dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:orientation="vertical"
                    android:padding="10dp">

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

                        <ImageView
                            android:id="@+id/expandSensornodeButton"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_marginRight="5dp"
                            android:src="@drawable/expand_chart"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:ellipsize="end"
                            android:maxLines="2"
                            android:text="@string/project_sensornode_title"
                            android:textSize="16sp"/>
                    </LinearLayout>


                    <ProgressBar
                        android:id="@+id/sensorNodeProgressBar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"/>

                    <com.github.mikephil.charting.charts.RadarChart
                        android:id="@+id/sensorNodeChart"
                        android:layout_width="match_parent"
                        android:layout_height="175dp"
                        android:layout_marginTop="16dp"
                        android:tag="@string/project_chart_tag"
                        android:visibility="gone"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/aggregateNodeCard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                app:cardElevation="2dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="right"
                    android:orientation="vertical"
                    android:padding="10dp">

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

                        <ImageView
                            android:id="@+id/expandAggregateButton"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_marginRight="5dp"
                            android:src="@drawable/expand_chart"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:ellipsize="end"
                            android:maxLines="2"
                            android:text="@string/project_aggregatenode_title"
                            android:textSize="16sp"/>

                    </LinearLayout>

                    <ProgressBar
                        android:id="@+id/aggregateNodeProgressBar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"/>

                    <com.github.mikephil.charting.charts.RadarChart
                        android:id="@+id/aggregateNodeChart"
                        android:layout_width="match_parent"
                        android:layout_height="175dp"
                        android:layout_marginTop="16dp"
                        android:tag="@string/project_chart_tag"
                        android:visibility="gone"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </LinearLayout>
</ScrollView>

I added the complete layout, and also here is an image for clarification (I marked the scrollable areas which I can drag):

EDIT2

Maybe it is also important that these layouts are Fragments inside a ViewPager. Is it possible that the ViewPager prevents the ScrollView (and any other views inside it) gaining the focus / handling the touch events? The code for my ViewPager is this:

<android.support.v4.view.ViewPager
    android:id="@+id/projectPager"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

EDIT3

It seems the problem must be with ViewPager + (Nested)ScrollView (I tried to exchange the plain ScrollView with that, but without success). I created a dummy layout for my Fragment that only hosts a parent NestedScrollView, a LinearLayout and many big TextViews like this:

<android.support.v4.widget.NestedScrollView
android:id="@+id/scrollView"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".projects.details.ProjectDetailsActivity_">

<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"
              android:padding="@dimen/activity_horizontal_margin">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:ellipsize="none"
        android:gravity="center_horizontal"
        android:text="Project name"
        android:textSize="80sp"/>

... <!-- more TextViews come here -->

...and scrolling also doesn't work! Only at the very edge of the screen, as previously. I have no idea how can this happen...

From your edit it seems that it's not related to CardView - perhaps you could reedit to omit the CardView, and provide instead more information about the rest of your setup. — ataulm, Apr 24 '16 at 19:33
Did you try setting `android:clickable="true"` and `android:focusable="true"` attributes of the `CardView`? — fillobotto, Apr 24 '16 at 19:41
Yes, I tried them, no luck. I edited my post with more details, maybe these can help. — Sleeper9, Apr 24 '16 at 21:09
Tried that, still no luck. Can the fact cause this, that my `CardView`s get "populated" (e.g. more `View`s added) later on? I just made a very small sample with `ScrollView` containing only `TextView`s and `ImageView`s, and I can scroll the content. — Sleeper9, Apr 25 '16 at 18:43
Well you are on the right track - in any form of problem like this, the trick to solving it is to build up from a simple working example, adding bits as you go, moving towards the broken version. All of a sudden one change will break it, and you will know where to look, and what extra info to add to this question (or a self-answer) — Richard Le Mesurier, May 01 '16 at 09:55
No luck about this yet. As the problem appeared only on rather old devices so long, I gave up debugging. Do you have the same problem? — Sleeper9, Jul 18 '16 at 12:29

score 2 · Answer 1 · answered Apr 26 '16 at 20:17

2

You are right, the 2 scrollable controls are competing with each other.

Use a NestedScrollView from the Support Library instead. It is designed to get around problems of this type.

It has many enhancements that lets it work with other scrollable controls, including the ViewPager, RecyclerView (as long as you call .setNestedScrolling(true)) and CoordinatorLayout.

Based on the above, I have been using this new class in all instances, and the scrolling within scrolling has been working perfectly. Our product is live with perfectly working NestedScrollView controls inside a ViewPager, some with embedded RecyclerView lists inside them as well.

answered Apr 26 '16 at 20:17

Richard Le Mesurier

29,432
22
140
255

1

Well, I exchanged `` with ``, but still nothing has changed. :( I called `.setNestedScrolling(true)` as well. Is there something I need to set in the XML layout? – Sleeper9 Apr 26 '16 at 21:33
Ok sorry it didn't help in this case. Will leave this here in case of other readers. Community wiki so anyone can edit and improve. – Richard Le Mesurier Apr 26 '16 at 22:07
1

But the problem must be here somewhere... As I wrote, my other Views inside the `ScrollView` neither respond to tap, pinch etc. events, so the ViewPager must be consuming the gesture somehow... – Sleeper9 Apr 26 '16 at 22:10

score 2 · Accepted Answer · edited May 23 '17 at 12:17

Solved! I had exactly the same problem. You are probably using a PageTransformer ViewPager animation.

Disabling the custom page transformer for < Android 4.1 solved it:

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        // there are problems with this on 4.0.3, probably also on 4.1
        viewPager.setPageTransformer(true, new DepthPageTransformer());
    }

Your post and research saved me a lot of time, thank you.

OTHER SOLUTION:

If you like your animation, you can also try changing your DepthPageTransformer to this: https://stackoverflow.com/a/28214802/1310343c

I can't believe it... Many-many thanks, this solved my problem as well! :) — Sleeper9, Jul 18 '16 at 13:23

score 2 · Answer 3 · answered Jan 31 '17 at 06:34

For me this setup worked: I have a Coordinator layout which has below nested scrollview

 <android.support.v4.widget.NestedScrollView
    android:layout_marginTop="8dp"
    android:fillViewport = "true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <include layout="@layout/content_app_bar_search_patient_module"/>

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

and <include layout="@layout/content_app_bar_search_patient_module"/>has a viewpager which has fragment which contains again a nested scrollview

<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">
.
.
.
    </android.support.v4.widget.NestedScrollView>

DJafari · Answer 4 · 2016-04-25T13:03:31.050

-1

Your ScrollView must have match_parent height and first child of scrollview ( LinearLayout ) must have wrap_content height

edited Apr 25 '16 at 13:03

answered Apr 24 '16 at 18:23

DJafari

12,955
8
43
65

I've tried that previously (I also left an `android:orientation="vertical"`in my sample by mistake), but did not help. I'm currently trying with Genymotion Google Nexus S@4.1.1. – Sleeper9 Apr 24 '16 at 19:16
@Sleeper9 give your xml layout complete . – DJafari Apr 24 '16 at 20:54
I've edited my post, added the full layouts and an image for clarification! – Sleeper9 Apr 25 '16 at 07:11

ScrollView inside ViewPager does not scroll on Android 4.x

4 Answers4

Linked