Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25792] Android: Scrolling horizontal ScrollView within a vertical ScrollView should disable vertical scrolling

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-04-18T00:25:41.000+0000
Affected Version/sRelease 6.3.0
Fix Version/sRelease 7.3.0
ComponentsAndroid
LabelsScrollView, android, parity
ReporterJoshua Quick
AssigneeJoshua Quick
Created2018-02-21T02:33:59.000+0000
Updated2018-06-21T22:18:51.000+0000

Description

*Summary:* When scrolling a "horizontal" ScrollView within a "vertical" ScrollView, it will scroll horizontally until you scroll too far up/down, then horizontal scrolling will be canceled by the parent "vertical" ScrollView and it'll only scroll vertically from then on. This is a behavior change that was introduced in Titanium 6.3.0. The old behavior would block the parent ScrollView from scrolling vertically while scrolling the child horizontal ScrollView. This behavior should be restored. _(This is also the iOS behavior.)_ *Steps to Reproduce:*

Build/run the below code for Android using Titanium 6.3.0 or higher.

Start dragging one of the horizontal ScrollViews. (It's the box containing labels.)

As you drag it horizontally, drag up or down.

Notice the parent ScrollView will scroll vertically, but you can no longer scroll the child ScrollView horizontally anymore.

var window = Ti.UI.createWindow({ fullscreen: true });
var verticalScrollView = Ti.UI.createScrollView(
{
	layout: "vertical",
	scrollType: "vertical",
	showVerticalScrollIndicator: true,
	showHorizontalScrollIndicator: false,
	backgroundColor: "darkgray",
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
});
for (var scrollViewIndex = 1; scrollViewIndex <= 20; scrollViewIndex++) {
	verticalScrollView.add(Ti.UI.createLabel(
	{
		text: "Horizontal Scroll View " + scrollViewIndex.toString(),
		color: "white",
		top: "10dp",
	}));
	var horizontalScrollView = Ti.UI.createScrollView(
	{
		layout: "horizontal",
		scrollType: "horizontal",
		showVerticalScrollIndicator: false,
		showHorizontalScrollIndicator: true,
		backgroundColor: "darkgray",
		borderWidth: "1dp",
		borderColor: "black",
		width: "100%",
		height: "100dp",
	});
	for (var labelIndex = 1; labelIndex <= 20; labelIndex++) {
		horizontalScrollView.add(Ti.UI.createLabel(
		{
			text: " Label " + labelIndex.toString() + " ",
			color: "white",
			backgroundColor: "gray",
			top: "5dp",
			left: "5dp",
		}));
	}
	verticalScrollView.add(horizontalScrollView);
}
window.add(verticalScrollView);
window.open();
*Result:* Once you drag up or down while scrolling horizontally, the horizontal ScrollView's scrolling is canceled and only the parent vertical ScrollView can be scrolled. *Expected Result:* Parent vertical ScrollView should not be scrollable while scrolling a child horizontal ScrollView. This was the old Android behavior. It is also the iOS behavior. *Cause:* ScrollViews call the parent view's requestDisallowInterceptTouchEvent() method when scrolling has started. However, Google's SwipeRefreshLayout.requestDisallowInterceptTouchEvent() method ignores the request when made by a child view (in this case a HorizontalScrollView) that does not support nested scrolling. Since it's ignored, the parent ScrollView ends up intercepting and stealing the nested HorizontalScrollView touch events. [SwipeRefreshLayout.java#L735](https://github.com/aosp-mirror/platform_frameworks_support/blob/master/core-ui/src/main/java/android/support/v4/widget/SwipeRefreshLayout.java#L735) *Work-Around:* You can restore the old behavior by listening to the horizontal ScrollView's "dragstart" and "dragend" events. In the "dragstart" event handler, disable the parent vertical ScrollView. In the "dragend" event handler, re-enable the parent vertical ScrollView.
horizontalScrollView.addEventListener("dragstart", function(e) {
	verticalScrollView.scrollingEnabled = false;
});
horizontalScrollView.addEventListener("dragend", function(e) {
	verticalScrollView.scrollingEnabled = true;
});

Comments

  1. Joshua Quick 2018-04-06

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/9985
  2. Lokesh Choudhary 2018-04-18

    FR Passed. PR merged.
  3. Lokesh Choudhary 2018-06-21

    Verified the fix in SDK 7.3.0.v20180618182516. Closing.

JSON Source