Thursday, June 13, 2013

MapView Transparency Bug on Titanium Android

While using the new MapView module for android, I noticed that the view becomes blank when it is animated. Even when I tried to refresh the view, the map would remain to be invisible (or seems to be located at the background).

At first, I thought it was the drawer menu widget that I was using. However, as I looked further, I was able to confirm that any animation that moves the MapView on the screen causes it to become invisible (like my sample below):

View code:
1:  <Alloy>  
2:       <Window class="container">  
3:            <View id="mainwindow" top="0" left="0" right="0" bottom="0" backgroundColor="white" onClick="doClick">  
4:            </View>  
5:       </Window>  
6:  </Alloy>  

Controller code:
1:  var MapModule = require('ti.map');  
2:  var mapview = MapModule.createView({  
3:       mapType : MapModule.NORMAL_TYPE,  
4:       region: {  
5:            latitude:33.74511,   
6:            longitude:-84.38993,  
7:      latitudeDelta:0.01,   
8:      longitudeDelta:0.01  
9:    },  
10:    top : '50dp',  
11:    left : 0,  
12:    right : 0,  
13:    bottom : 0,  
14:    animate:true,  
15:    regionFit:true  
16:  });  
17:  $.mainwindow.add(mapview);  
18:  function doClick(e) {   
19:    $.mainwindow.animate({  
20:         left : '300dp',  
21:         top : 0,  
22:         right : 0,  
23:         bottom : 0  
24:    });  
25:  }  
26:  $.index.open();  

To check if the problem is rooted at the native android sdk, I created a similar scenario on a native android application. When I was not able to encounter the same problem,  I then tried to find a workaround for this bug.

After a lot of searching, I finally found out that using hardware acceleration on the application would help in bringing back the MapView. So, going to the Android manifest, you need to find the application tag and add the property to enable hardware acceleration on your application:

1:  <application android:icon="@drawable/appicon"  
2:            android:label="sample" android:name="SampleApplication"  
3:            android:debuggable="false"  
4:            android:hardwareAccelerated="true">  

Please note that using this solution, the MapView may still disappear a bit while the view is animating, but it comes back again after the animation finishes.

No comments:

Post a Comment