Question

So following the concept here:

http://docs.appcelerator.com/titanium/2.1/index.html#!/guide/Using_density-specific_resources_on_Android

i created a folder that was

Resources/android/images/

and then under that is:

high/
medium/
low/

and within each of those are the different-density files (like about.png, say)

The problem is that when i reference them:

var aboutTab = Ti.UI.createTab({
    icon: '/images/about.png',
    title: 'about',
    window: about
});

OR as others have suggested like so (that is, losing the leading slash on ‘images’):

var aboutTab = Ti.UI.createTab({
    icon: 'images/about.png',
    title: 'about',
    window: about
});

and then load up the app, sure the tabs themselves are there… but the icons are not. Note that if i have a plain old file present at:

Resources/images/about.png

then the icon will appear… but not otherwise. Is there… is there something i’m missing on this?

Answer 1

Ok, so the standard answer never ended up working for me. I’m using Titanium 2.1 here. {insert insult about Ti developer heritage here}

The solution to this is simple – don’t use the much vaunted “smart titanium density specific solution” as discussed here:

http://docs.appcelerator.com/titanium/2.1/index.html#!/guide/Using_density-specific_resources_on_Android

Instead, use this simple, homely code to fix your problems!

var density =  (Titanium.Platform.displayCaps.dpi <= 160) ? 'low' : (Titanium.Platform.displayCaps.dpi > 160 && Titanium.Platform.displayCaps.dpi < 240) ? 'medium' : 'high'; 
var preamble = (Ti.Platform.osname === 'iphone' || (Ti.Platform.osname === 'ipad') )? 'images':'android/images/'+density + '/';

Ok, so the first bit sets the density – NOTE i do not know the proper density readings for Ti just now, i’m just putting this up until i work them out anyhoo – and the second bit uses it if the app is an android one.

Then, where i used to have:

var aboutTab = Ti.UI.createTab({
    icon: 'images/about.png',
    title: 'about',
    window: about
});

i now have:

var aboutTab = Ti.UI.createTab({
    icon: preamble + '/about.png',
    title: 'about',
    window: about
});

And that is that!

FINAL WORD:
i’ve noticed that this can behave very differently depending on the Titanium version used (2.1.3 vs 2.1.0) or the android sdk used. I’ve had best results with 2.1.0 and 4.2 android, and that includes using the ‘images’ prefix (you know, how the guides say to do it).

One thing i noticed was that I cannot have both the high/medium/low folders AND the hdpi folders, i need one or the other.

Another problem i faced was that sometimes the code wouldn’t load the android/images/ folders across. The completely bullet-proof way to do this is to use the code i’ve described, but put the density-specific folders directly under your images folder, and refer to them via images/high/ etc. Content in images is always copied across, and the code shown always works, regardless of Ti version.

Final note, make sure that your images are case-sensitively named, because it will work in the windows emulator but not in actual (unix-based) device.