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 [email protected], but do exists on a Samsung [email protected]). 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...

Answer 1

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

Answer 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.