Android - button images smaller than expected

[sdelcroix]

Hi,

Running an Android app through TiShadow renders button images in an extremely smaller size than expected.

I created a simple Alloy Tabbed Application and put one ImageView and one button on a tab, both sharing the same "image" property (original image size is 135x135 pixels). Through TiShadow, the ImageView displays the image with the right size but it's tiny in the button.

Issue seems to appear whatever the resolution and whatever it's an Alloy or Classic application.

Here is my environment :

• Titanium SDK : 3.2.0.GA
• Platform & version : Android 4.2.2
• Device/Emulator : Android emulator / Genymotion
• Host Operating System : OSX 10.8.5

I'm also using "dip" as UI default unit in tiapp.xml.

If needed you'll find some sample code on the Appcelerator Q&A topic there : http://developer.appcelerator.com/question/161461/tishadow---button-images-smaller-than-expected

Expected button image size

Button image size smaller in TiShadow

Asset used

[FokkeZB]

Noticed this as well, there's something wrong with my density logic in https://github.com/dbankier/TiShadow/blob/master/app/Resources/api/DensityAssets.js :(

[sdelcroix]

Maybe, but please note that I don't use density resources folder in my sample app. Image is placed in "android/images/buttons" folder.

However, as you talk about this file precisely, maybe there's another issue, with ratio logic this time, as I posted earlier on TiShadow Google Group : https://groups.google.com/forum/#!topic/tishadow/Sy9CQL3jswI

I'll soon post this issue here.

[nuno]

@sdelcroix Hi, you probably have to change the value "dip" or "dp" unit in tiapp.xml of tishadowapp, I think.

[sdelcroix]

@nuno Hi, by the time I was using the tishadowapp, both this and my app had the same unit in their respective tiapp.xml and issue occured yet ;) Now I'm using TiShadow in its "express" mode, with --shadow build flag, so no need of tishadowapp anymore in that case.

[FokkeZB]

Yes, I'm positive this issue of long/notlong is related. Need to look at the logic again.

[dbankier]

I just did some quick tests and I think it is returning the right values. I suspect it is getting mangled in the sdk have come from applicationDataDirectory and not the resourceDirectory, but I need to confirm that.

[dbankier]

Everything below are comments related to use Titanium directly, not with TiShadow

I did some more tests. The issue raises its head with buttons, action bar, map pins, etc and not image view.

If the image provided is in the android/images folder and density specific it has the right scaling otherwise it shrinks down.

Not sure what this means for TiShadow. Might need to understand why the SDK behaves like that and perhaps raise an issue.

Here is the code used for testing:

var win = Ti.UI.createWindow({ layout:'vertical'});
win.add(Ti.UI.createButton({image:"/images/ic_action_search.png"}));
win.add(Ti.UI.createImageView({image:"/images/ic_action_search.png"}));
win.add(Ti.UI.createButton({image:"/ic_action_search.png"}));
win.add(Ti.UI.createImageView({image:"/ic_action_search.png"}));
var destination = Ti.Filesystem.applicationDataDirectory + "/search.png";

var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "ic_action_search.png");
file.copy(destination);

win.add(Ti.UI.createButton({image:destination}));
win.add(Ti.UI.createImageView({image:destination}));

var activity = win.activity;

activity.onCreateOptionsMenu = function(e){
  var menu = e.menu;
  var menuItem = menu.add({ 
    title: "Item 1", 
    icon:  destination,
    showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM
  });
  var menuItem = menu.add({ 
    title: "Item 1", 
    icon:  "ic_action_search.png",
    showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM
  });
var menuItem = menu.add({ 
    title: "Item 1", 
    icon:  "/images/ic_action_search.png",
    showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM
  });
};
win.open();

Here is the screenshot:

Here is the project tree:

.
├── android
│   ├── appicon.png
│   ├── default.png
│   └── images
│       ├── ic_action_search.png
│       └── res-xxhdpi
│           └── ic_action_search.png
├── app.js
└── ic_action_search.png

3 directories, 6 files

And the xxhdpi image file:

[FokkeZB]

Looking at https://github.com/appcelerator/titanium_mobile/blob/e91102a8f8152a68dcb63115e09260be5f002f2c/android/modules/platform/src/java/ti/modules/titanium/platform/DisplayCapsProxy.java#L62 we might want to use getDensity in https://github.com/dbankier/TiShadow/blob/master/app/Resources/api/DensityAssets.js#L13

[dbankier]

Thanks Fokke. It will clean up the code, but the issue in my previous comment with the TiSDK still exists.

[dbankier]

Can I get anyone reading this issue to following the issue on https://jira.appcelerator.org/browse/TC-3593

[FokkeZB]

watching

[sdelcroix]

I'm watching too

[SteveFortune]

+1

[ulizama]

I'm having the same issues, and it happens with ImageViews as well. The images that it's using to render don't correspond to the simulator's DPI.