Titanium JIRA Archive
Appcelerator Community (AC)

[AC-2593] Android: ScrollableView does not work properly when inside a View

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionCannot Reproduce
Resolution Date2013-09-17T22:28:58.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsn/a
ReporterErik Lindqvist
AssigneeShak Hossain
Created2013-08-18T10:27:09.000+0000
Updated2016-03-08T07:41:40.000+0000

Description

*Problem* If I put a ScrollableView inside a ScrollView, swiping left-right works as expected. However, if I place the ScrollableView inside a View and then put this View inside a ScrollView, swiping left-right does not work as expected. The ScrollableView is "flickering" when swiping and smooth scrolling is not possible except if you flick your pointer/finger quickly. *Test case*
var win = Ti.UI.createWindow({
    backgroundColor : 'white'
});
 
var scrollView = Ti.UI.createScrollView();
 
var scrollableView = Ti.UI.createScrollableView({
    top : 100,
    height : 180,
    bubbleParent : false
});
 
var label1 = Ti.UI.createLabel({
    text : 'Page 1',
    color : 'black',
    top : 0,
    backgroundColor : 'red'
});
var label2 = Ti.UI.createLabel({
    text : 'Page 2',
    color : 'black',
    top : 0,
    backgroundColor : 'green'
});
var view1 = Ti.UI.createView({
    top : 280,
    backgroundColor : 'yellow',
    height : 2000
});
 
var wview1 = Ti.UI.createView({
    width : Ti.UI.FILL,
    height : Ti.UI.FILL,
    bubbleParent : false,
    touchEnabled : false
});
 
scrollableView.addView(label1);
scrollableView.addView(label2);
wview1.add(scrollableView);
scrollView.add(wview1);
scrollView.add(view1);
win.add(scrollView);
 
win.open();

Comments

  1. Daniel Sefton 2013-08-20

    Hi Erik, I'm a little confused around here:
    //Works
       //scrollView.add(wview1); //Does not work
    To reproduce your issue, do I simply uncomment that line? (The fact that //Works is there also is confusing). I did so, but I can't reproduce what you're describing. The horizontal scrolling still works and doesn't flicker. (3.1.2 GA)
  2. Erik Lindqvist 2013-08-21

    I think I have found the problem; vertical movements are passed on to the ScrollView (correctly), but this means that if I don't swipe using a perfect horizontal movement the ScrollableView will stop listening and the ScrollView will take over. This would explain why I sometimes "drop" the page when I am trying swipe right to left (because my finger is losing "course" after a while). I tried it on two devices now and they are showing the same behavior; if my horizontal movement is not "perfect" the ScrollableView stops listening and the ScrollView takes over. Adding only the ScrollableView to the ScrollView (without wrapping it in a View) makes the ScrollableView not bubble/passing on the vertical swipe gesture to the ScrollView. This, however, creates a "dead" space on the screen since you can't scroll the screen vertically by touching the ScrollableView first, but it makes horizontal scrolling in the ScrollableView less "error prone". I don't know if this is a "bug" or intended behavior, I guess you could argue for both...? What am I looking for? I want to be able to swipe horizontally in the ScrollableView, but at the same time I want to be able to scroll the Scroll view vertically when I tap and swipe vertically on the ScrollableView. For reference, look and feel the cover flow on the "What's new" page in the Spotify app. (Sorry for the 1 million updates of the test case...)

JSON Source