Problem Description
Everytime I try to use a density independent image as map annotation rightButton property, I get the following error (like the image was not there):
[WARN] dalvikvm: VFY: unable to resolve static field 1611 (common_google_play_services_install_button) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1608 (common_google_play_services_enable_button) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1623 (common_google_play_services_update_button) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1619 (common_google_play_services_unknown_issue) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1613 (common_google_play_services_install_text_tablet) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1612 (common_google_play_services_install_text_phone) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1609 (common_google_play_services_enable_text) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1624 (common_google_play_services_update_text) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1621 (common_google_play_services_unsupported_text) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1617 (common_google_play_services_network_error_text) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1615 (common_google_play_services_invalid_account_text) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1620 (common_google_play_services_unsupported_date_text) in Lcom/google/android/gms/R$string;
[WARN] dalvikvm: VFY: unable to resolve static field 1619 (common_google_play_services_unknown_issue) in Lcom/google/android/gms/R$string;
[ERROR] GooglePlayServicesUtil: The Google Play services resources were not found. Check your project configuration to ensure that the resources are included.
[INFO] I/Google Maps Android API: Google Play services client version: 4132500
[INFO] I/Google Maps Android API: Google Play services package version: 4452032
[INFO] fpp: Making Creator dynamically
[INFO] I/Google Maps Android API: Google Play services client version: 4452000
[DEBUG] dalvikvm: GC_CONCURRENT freed 1928K, 25% free 8152K/10755K, paused 29ms+18ms, total 129ms
[INFO] Choreographer: Skipped 79 frames! The application may be doing too much work on its main thread.
[INFO] I/Adreno200-EGL: <qeglDrvAPI_eglInitialize:299>: EGL 1.4 QUALCOMM build: AU_LINUX_ANDROID_JB_REL_RB1.04.01.01.06.042_msm7627a_JB_REL_RB1.2_Merge_release_AU (Merge)
[INFO] I/Adreno200-EGL: Build Date: 11/06/12 Tue
[INFO] I/Adreno200-EGL: Local Branch:
[INFO] I/Adreno200-EGL: Remote Branch: m/jb_rel_rb1.2
[INFO] I/Adreno200-EGL: Local Patches: NONE
[INFO] I/Adreno200-EGL: Reconstruct Branch: AU_LINUX_ANDROID_JB_REL_RB1.04.01.01.06.042 + NOTHING
[ERROR] TiDrawableReference: (main) [2960,2960] Problem opening stream with url /images/infoicon.png: Resources/images/infoicon.png
[ERROR] TiDrawableReference: java.io.FileNotFoundException: Resources/images/infoicon.png
[ERROR] TiDrawableReference: at android.content.res.AssetManager.openAsset(Native Method)
[ERROR] TiDrawableReference: at android.content.res.AssetManager.open(AssetManager.java:315)
[ERROR] TiDrawableReference: at android.content.res.AssetManager.open(AssetManager.java:289)
[ERROR] TiDrawableReference: at org.appcelerator.titanium.util.TiFileHelper.openInputStream(TiFileHelper.java:220)
[ERROR] TiDrawableReference: at org.appcelerator.titanium.view.TiDrawableReference.getInputStream(TiDrawableReference.java:791)
[ERROR] TiDrawableReference: at org.appcelerator.titanium.view.TiDrawableReference.getBitmap(TiDrawableReference.java:300)
[ERROR] TiDrawableReference: at org.appcelerator.titanium.view.TiDrawableReference.getBitmap(TiDrawableReference.java:284)
[ERROR] TiDrawableReference: at ti.map.TiMapInfoWindow.setLeftOrRightPane(TiMapInfoWindow.java:171)
[ERROR] TiDrawableReference: at ti.map.AnnotationProxy.processOptions(AnnotationProxy.java:168)
[ERROR] TiDrawableReference: at ti.map.TiUIMapView.addAnnotation(TiUIMapView.java:327)
[ERROR] TiDrawableReference: at ti.map.TiUIMapView.addAnnotations(TiUIMapView.java:341)
[ERROR] TiDrawableReference: at ti.map.TiUIMapView.processMapProperties(TiUIMapView.java:157)
[ERROR] TiDrawableReference: at ti.map.TiUIMapView.onViewCreated(TiUIMapView.java:111)
[ERROR] TiDrawableReference: at org.appcelerator.titanium.view.TiUIFragment.handleMessage(TiUIFragment.java:65)
[ERROR] TiDrawableReference: at android.os.Handler.dispatchMessage(Handler.java:95)
[ERROR] TiDrawableReference: at android.os.Looper.loop(Looper.java:137)
[ERROR] TiDrawableReference: at android.app.ActivityThread.main(ActivityThread.java:4795)
[ERROR] TiDrawableReference: at java.lang.reflect.Method.invokeNative(Native Method)
[ERROR] TiDrawableReference: at java.lang.reflect.Method.invoke(Method.java:511)
[ERROR] TiDrawableReference: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:789)
[ERROR] TiDrawableReference: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:556)
[ERROR] TiDrawableReference: at dalvik.system.NativeStart.main(Native Method)
Testing Environment:
Titanium SDK: 3.2.3.GA 3.3.0.RC,
Titanium CLI: 3.3.0 –rc,
Android SDK: 4.2.2,4.4.2,
OS X Version: 10.9.3,
Appcelerator Studio: 3.2.3
Steps to reproduce the issue:
1.Create a Alloy project.
2.Paste this code in index.xml,index.js file and Alloy.js file.
3.configure your tiapp.xml file with Google API key.
4. Paste some density-independent image in Android>images>> folders
5.Run this code with testing environment.
<Alloy>
<Window layout="vertical">
<!-- Use the Alloy.Globals.Map namespace to create a map module view -->
<View id="map" ns="Alloy.Globals.Map" width='Ti.UI.FILL' height="400" top='10'></View>
<View top="30" width="50" height="50" backgroundImage="/images/infoicon.png" backgroundColor="red"></View>
</Window>
</Alloy>
$.map.setAnnotations([Alloy.Globals.Map.createAnnotation({
latitude : 35.8667,
longitude : 6.2333,
title : 'A title',
subtitle:'test',
rightButton : "/images/infoicon.png"
}), Alloy.Globals.Map.createAnnotation({
latitude : 44.8667,
longitude : 10.2333,
title : 'Another title',
subtitle:'test',
leftButton : "/images/infoicon.png"
})]);
$.index.open();
Alloy.Globals.Map = require('ti.map');
Reported by [~landimatte]
This doesn't seem like an Alloy issue. Tested using the attached Classic project, ALOY1083_classic.zip,
leftButtonandrightButtonproperties are not working, use the same value onimageproperty, the image shows. Here is the error log when trying to load the image:Here's the code snippet:var opera = MapModule.createAnnotation({ latitude: -33.8569, longitude: 151.2153, image: '/images/infoicon.png', leftButton: '/images/infoicon.png', title: 'Sydney Opera House', subtitle: 'Sydney, New South Wales, Australia' }); var bridge = MapModule.createAnnotation({ latitude: -33.852222, longitude: 151.210556, image: '/images/infoicon.png', rightButton: '/images/infoicon.png', title: 'Sydney Harbour Bridge', subtitle: 'Port Jackson' });We've had this same problem for quite some time - I can't recall when it worked properly. And its a problem for Alloy and direct programming. We have had to implement the code below to get the leftButton or rightButton images to size properly on different platforms. This particular example is scaling an (i) for info button to be the right size for different densities. When we try to do this by putting the different sizes in the Android images folders (either under platform/Android or Resources/Android), the correct image is not selected.
switch (density) { case 'low' : infoGraphic = '/images/info-32.png'; break; case 'medium' : infoGraphic = '/images/info-48.png'; break; case 'high' : infoGraphic = '/images/info-64.png'; break; case 'xhigh' : infoGraphic = '/images/info-72.png'; break; case 'xxhigh' : infoGraphic = '/images/info-96.png'; break; default: infoGraphic = '/images/info-64.png'; break; }var annot = TiMap.createAnnotation({ latitude : entry.latitude, longitude : entry.longitude, title : entry.name, subtitle : subtitle, leftButton : infoGraphic , image : entry.icon, });The point is that if you put your leftButton or rightButton graphic into the density-specific directories (e.g. drawable-hdpi under platform/android/res or res-hdpi under Resources/android/images) the code DOES NOT pick up the appropriate graphic for the density. Yes, it has nothing to do with using or not using Alloy.
If you want a test case, just look at the MapView on Kitchen Sink 3.3.0 with the leftButton image that is supposed to be of the Atlanta Braves Baseball Stadium - but it is so small on a high-density device like an HTC One or Samsung Galaxy S4 or 5 that you can't even make the picture out. So if you then try to create density specify images in the Resources/android/images directory under high, xhigh or xxhigh, they aren't picked up for the leftButton or rightButton - the same image in Resources/images is used.
Isn´t this a quite critical bug? I use SDK 5.0.2 today and the latest API 21/23 for Android and still we cannot use density specific image for the annotation? It becomes almost impossible to use annotation in the map without being able to adapt the image. Joe how did you define the "density" variable that you use?
var density = Ti.Platform.displayCaps.density; It's the persistence of bugs like these plus the availability of so many APIs and SDKs from Apple, Android & 3rd Parties that are not supported by Titanium that is driving us (quite unwillingly) into native code on projects. Having good looking map annotations is kind of basic and we've had this work-around code in place for over 1.5 years now!
Thanks Joe for the fast answer, It is indeed too bad this is not fixed, but I will have a go on support side and ask, how ever I do not completely agree with you there, it is WAY more expensive to make 3 - 4 native apps then one that covers 80% of code cross platform, not to mention the overhead in maintenance and new feature implementation. We use native modules when needed which is just sometimes and it works well. Looking forward to using hyperloop now in Windows Phone which kind of makes it easier. (slightly off topic I guess) but thanks for the info... /J
We would need to change our map code here... https://github.com/appcelerator-modules/ti.map/blob/master/android/src/ti/map/AnnotationProxy.java#L265 ...to load an Android "BitmapDrawable" similar to how I did it in the Aisle411 module here... https://github.com/hansemannn/titanium-aisle411/blob/329fe441e7ffce522d0432a205f32c5f6bd18088/android/src/ti/aisle411/MapViewProxy.java#L421 With the only aspect that I don't like about this now is that TiDrawableReferece.getDensityScaledDrawable() will actually scale the bitmap pixels if loaded from the APK's "assets" folder, instead of loading the image as-is and then scale the drawable (ie: the OpenGL accelerated polygon) the bitmap is applied as a texture to. Not a big deal for small annotation images, but it is a giant performance/memory issue for large images.