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

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Won't Fix
Resolution Date	2013-03-19T20:04:14.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Appcelerator Modules
Labels	android, mapview, scrollview
Reporter	Tommy Leung
Assignee	Mauro Parra-Miranda
Created	2013-03-05T20:15:31.000+0000
Updated	2016-03-08T07:41:28.000+0000

Description

Problem

A mapview in a scrollview should not leave behind a black box when scrolled. This works in Android 4.x but NOT in Android 2.3.x

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

File	Date	Size
20130305_151000.jpg	2013-03-05T20:15:31.000+0000	1788184

Comments

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

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