ScrollView inside ViewPager does not scroll on Android 4.x

Question

ScrollView inside ViewPager does not scroll on Android 4.x

I have a problem that, apparently, only affects Android 4.x and may also be device specific (ie it does not exist on my Huawei G630 @ 4.3, but exists on Samsung Ace2@4.4.4 ) . I have a ScrollView that contains a RelativeLayout that has 4 CardView s. Now, on some 4.x devices, the scroll event just doesn't happen when I try to scroll the start from the map. If I touch the small pad between the cards or above the first card (and not between any two) and the device screen, I can scroll the contents.

 <?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>

Android 5.x and 6.x have no problems.

EDIT

It seems that the problem is not related exclusively to CardView , as I have a different layout, and it also does not scroll even when dragging the screen using a 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"/> <cfqaprojects.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 full layout, as well as the image for clarification (I noted the scrollable areas that I can drag):

EDIT2

It may also be important that these layouts are fragments within the ViewPager . Is it possible that the ViewPager preventing the ScrollView (and any other views inside it) from receiving focus / handling 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 that the problem should be with ViewPager + (Nested)ScrollView (I tried to exchange a simple ScrollView with this, but to no avail). I created a dummy layout for my fragment, which contains only the parent NestedScrollView , LinearLayout and many large TextView as follows:

 <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 doesn't work either! Only at the very edge of the screen, as before. I do not know how this can happen ...

+5

android android-scrollview android-4.2-jelly-bean

Sleeper9 Apr 24 '16 at 18:19

source share

4 answers

You are right, the two scrambled controls are competing with each other.

Use NestedScrollView from the Support Library. It is designed to solve this type of problem.

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

Based on the foregoing, I use this new class in all instances, and scrolling in scrolling works fine. Our product works with perfectly working NestedScrollView inside the ViewPager , some with built-in RecyclerView lists inside them.

+2

Richard Le Mesurier Apr 26 '16 at 20:17

source share

For me, this setting worked: I have a coordinator which has below scrollview nested

  <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 that has a snippet that contains the scrollview again nested

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

+1

vikas kumar Jan 31 '17 at 6:34

source share

Your ScrollView should have match_parent height , and the first child scrollview ( LinearLayout ) should have wrap_content height

-1

DAVOOD Apr 24 '16 at 18:23

source share

Frank · Accepted Answer · 2016-07-18T12:42:21+0000

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

Disabling custom page transformer for <Android 4.1 decided:

  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 message and research saved me a lot of time, thanks.

OTHER DECISION:

If you like your animation, you can also try changing your DepthPageTransformer to the following: fooobar.com/questions/1247826 / ...

ScrollView inside ViewPager does not scroll on Android 4.x

More articles: