Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-11820] Android: ScrollableView in ScrollView is not working

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-10-14T23:35:03.000+0000
Affected Version/sRelease 2.1.2
Fix Version/s2013 Sprint 03 Core, 2013 Sprint 03, Release 3.2.0
ComponentsAndroid
LabelsSupportTeam, module_scrollableview, qe-testadded
Reporterwong ka ming
AssigneeAllen Yeung
Created2012-09-01T02:36:28.000+0000
Updated2014-02-11T09:45:45.000+0000

Description

Description of the problem

When a ScrollableView is added inside a ScrollView, all of the scroll events will be captured by the ScrollView. This makes the ScrollableView difficult to scroll.

Steps to reproduce

Use the following code to reproduce the problem: trying to scroll through the ScrollableView screens does not work as it should. 
var win = Ti.UI.createWindow();
win.open();

var scroll = Ti.UI.createScrollView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: 'orange',
    contentHeight: '2000',
    contentWidth: 'auto',
    layout: 'vertical'
});


var v1 = Ti.UI.createView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: 'blue'
});

var v2 = Ti.UI.createView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: 'green'
});

var v3 = Ti.UI.createView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: 'red'
});


var v4 = Ti.UI.createView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
    backgroundColor: 'purple'
});

var scrollable = Ti.UI.createScrollableView({
    height: 300,
    width: 400,
    backgroundColor: 'pink',
    views: [v1,v2,v3,v4]
});

scroll.add(scrollable);

win.add(scroll);

Comments

  1. Max Stepanov 2012-11-19

    {quote} canCancelEvents : Boolean Determines whether this scroll view can cancel subview touches in order to scroll instead. Set to false to ensure that subview touches always take effect. Default: true {quote}
  2. Davide Cassenti 2012-11-20

    @Max: this doesn't really work in this case. Although setting canCancelEvents to false makes the ScrollableView working perfectly, the ScrollView behind it stops to react to any touch event - as they are prevented by the property. In particular, if I touch an "empty" space of the ScrollView, everything goes well, but if I touch any other view (a button, a label, a transparent container etc.), the scroll isn't captured. Below an updated sample code that shows what I mean: 
       var win = Ti.UI.createWindow();
   win.open();
   
   var scroll = Ti.UI.createScrollView({
       height: Ti.UI.FILL,
       width: Ti.UI.FILL,
       backgroundColor: 'orange',
       contentHeight: '2000',
       contentWidth: 'auto',
       layout: 'vertical',
       canCancelEvents: false
   });
   
   
   var v1 = Ti.UI.createView({
       height: Ti.UI.FILL,
       width: Ti.UI.FILL,
       backgroundColor: 'blue'
   });
   
   var v2 = Ti.UI.createView({
       height: Ti.UI.FILL,
       width: Ti.UI.FILL,
       backgroundColor: 'green'
   });
   
   var v3 = Ti.UI.createView({
       height: Ti.UI.FILL,
       width: Ti.UI.FILL,
       backgroundColor: 'red'
   });
   
   
   var v4 = Ti.UI.createView({
       height: Ti.UI.FILL,
       width: Ti.UI.FILL,
       backgroundColor: 'purple'
   });
   
   var scrollable = Ti.UI.createScrollableView({
       height: 300,
       width: 400,
       backgroundColor: 'pink',
       views: [v1,v2,v3,v4]
   });
   
   var bottomView = Ti.UI.createView({
       backgroundColor: 'white',
       top: 50,
       left: 0,
       right: 0,
       height: 600
   });
   
   scroll.add(scrollable);
   scroll.add(bottomView);
   
   win.add(scroll);
    I do have the ScrollableView on top (blue background), which just works seamlessly, but I cannot scroll down unless I touch the very little orange line between the ScrollableView and another View below it (left 50px on purpose in this example).
  3. M Mader 2012-11-20

    The same applies for MapView inside ScrollView and can be fixed by extending the native Android class for this view and adding this code: 
       @Override
   public boolean onTouchEvent(MotionEvent ev) {
       int action = ev.getAction();
       switch (action) {
       case MotionEvent.ACTION_DOWN:
           // Disallow ScrollView to intercept touch events.
           this.getParent().requestDisallowInterceptTouchEvent(true);
           break;
   
       case MotionEvent.ACTION_UP:
           // Allow ScrollView to intercept touch events.
           this.getParent().requestDisallowInterceptTouchEvent(false);
           break;
       }
   
       // Handle MapView's touch events.
       super.onTouchEvent(ev);
       return true;
   }
    Maybe this could be implemented and be enabled/disabled via a property?
  4. Bill Dawson 2012-11-20

    We seem to have an even bigger problem in Titanium 3.0, in the sense that even with canCancelEvents: false, it's almost impossible to scroll the scrollableview now. I've traced that problem to this commit: https://github.com/appcelerator/titanium_mobile/commit/533f6d187c We'll no doubt have some parity issues to work out as well. My impression of using iOS on an iPhone _simulator_ is that it "just works" even without setting "canCancelEvents" at all (which means leaving it at its "true" default, I take it.)
  5. Allen Yeung 2012-12-07

    I have a PR for this that will essentially block touch events to the scroll view from a scrollable view. You do no need to use 'canCancelEvents' to achieve this, so please test with the original test case. https://github.com/appcelerator/titanium_mobile/pull/3558 This PR also contains changes for the 'canCancelEvents' property, which should be tested against TIMOB-9955. The behavior for 'canCancelEvents' may be different in iOS since it's a native property there and I have updated the docs to say this as well.
  6. Tommy Leung 2013-01-16

    This ticket has been pushed back about 3 sprints now. Is there an ETA when it will actually be merged in?
  7. Shyam Bhadauria 2013-02-25

    ScrollableView is now easy to scroll. Environment used for verification - Titanium SDK: 3.1.0.v20130223030327 Titanium  Studio:3.0.2.201302141201 Device : Nexus 7 Android 4.1
  8. Priti Srivastava 2013-07-19

    Using SDK 3.1.1 with Alloy project, when I tried test code that has ScrollableView inside ScrollView, I get 2 different behaviors mentioned below: 1. Creating controls in controller -> I tested the code snippet provided in the JIRA ticket you mentioned, on Alloy controller, the scrollable view works fine. But, another big problem is that ScrollView does not respond if you swipe up/down direction initiating touch from scrollable view. 2. Creating controls in XML -> Scrollable view does not swipes smoothly and works only if swipe direction is horizontal. In an angular motion on scrollableview, scrollView starts scrolling. In this approach ScrollView has expected behavior while swiping up/down directions. Attached herewith both the code snippets.
  9. Priti Srivastava 2013-07-19

    Here is the sample code: 1. Creating controls in controller -> Used the original code in the issue and placed it in index.js 2. Creating controls in XML ->
  10. Rick Blalock 2013-07-19

    Per Priti's comment above - this is still an issue.
  11. Allen Yeung 2013-10-14

    [~psrivastava], 1. This is expected behavior. As I mentioned before, for the android implementation, we block off all events to the scroll view from a scrollable view. This is why a vertical scroll inside a scrollable view won't affect the scroll view. 2. In terms of scrolling not being smooth, this is native behavior. If you check out the demo at http://developer.android.com/training/animation/screen-slide.html, you get similar scrolling behavior. We just use the native ViewPager under the hood.
  12. Federico Casali 2013-10-23

    Verified fixed. TiSDK 3.2.0.v20131022050844 CLI 3.2.0 Titanium Studio 3.2.0.201310181940 Closing.

JSON Source