[AC-2434] [Android] Google Maps API v2 does not work in a scrollview

Description

Problem

Test case

var MapModule = require('ti.map');

var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var vert = Ti.UI.createScrollView({
	contentHeight: 'auto',
	scrollType: 'vertical',
	showVerticalScrollIndicator: true,
	layout:'vertical',
	canCancelEvents: false,
	width: Ti.UI.SIZE
});

var mapview = MapModule.createView({
	height: 250,
    mapType: MapModule.NORMAL_TYPE,
    region: {latitude: -33.87365, longitude: 151.20689, latitudeDelta: 0.1, longitudeDelta: 0.1 },
});

vert.add(Ti.UI.createView({
	height: 200, width: 100, backgroundColor: 'red'
}))

vert.add(Ti.UI.createView({
	height: 150, width: 100, backgroundColor: 'blue'
}))

vert.add(mapview);

vert.add(Ti.UI.createView({
	height: 300, width: 100, backgroundColor: 'green'
}))

win.add(vert);

win.open();

Attachments

Comments

1. Carter Lathrop 2013-03-19 The method of having scroll views within scroll views will not work (100% of the time) in android. The way that views are nested in the android OS does not permit flawless implementation of nested scroll views. For this reason, we cannot support this method. This isn't an issue with the Titanium platform, rather a limitation applied by the Android SDK. So unfortunately we are unable fix this problem from our end. Regards, Carter
2. Tommy Leung 2013-03-21 There are fixes natively if you follow this link. http://stackoverflow.com/questions/13746351/mapfragment-in-scrollview Following the idea from that discussion, one can also fix this in appcelerator code. (shown below for those who may find this problem with their own apps later on)

      var MapModule = require('ti.map');
      
      var win = Ti.UI.createWindow({
      	backgroundColor: 'white'
      });
      
      var vert = Ti.UI.createScrollView({
      	contentHeight: 'auto',
      	scrollType: 'vertical',
      	showVerticalScrollIndicator: true,
      	layout:'vertical',
      	canCancelEvents: false,
      	width: Ti.UI.SIZE
      });
      
      var mapview = MapModule.createView({
      	height: 250,
          mapType: MapModule.NORMAL_TYPE,
          region: {latitude: -33.87365, longitude: 151.20689, latitudeDelta: 0.1, longitudeDelta: 0.1 },
      });
      
      var con = Ti.UI.createView({width: 300, height: 250});
      con.add(mapview);
      con.add(Ti.UI.createView({backgroundColor: 'white', opacity: 0, touchEnabled: false}));
      
      vert.add(Ti.UI.createView({
      	height: 200, width: 100, backgroundColor: 'red'
      }))
      
      vert.add(Ti.UI.createView({
      	height: 150, width: 100, backgroundColor: 'blue'
      }))
      
      vert.add(con);
      
      vert.add(Ti.UI.createView({
      	height: 300, width: 100, backgroundColor: 'green'
      }))
      
      win.add(vert);
      
      win.open();
      
      
      

JSON Source