Doing a multi-platform app using a single Titanium codebase? Way to go! Titanium is great for doing this because of its smart platform specific folders. When packaging your app, only files – whether it’s code or assets – in the root or platform specific folder are included and used. And when you’re using the Alloy framework, even conditional code unreachable for the platform you build for will be stripped out. All this keeps your app lean and fast.
Images (and other media assets) are an app’s fat. And with iOS’s retina and Android’s 4+ densities your app can grow fast. So let’s take a look how to make use of these techniques to minimize your app’s total weight.
Note: For Alloy apps, just read
app/lib where ever I use
In this directory (or
app/assets/images for Alloy) you want to include all non-retina iOS images, except background images that you use with backgroundLeft- and TopCap. Images in this folder will also be used for Android mdpi devices and since Anroid handles stretchable backgrounds different we don’t want them here.
Here you will place all retina (
@2x) images plus the non-retina stretchable background images I told you not to put in the previous folder.
This folder should only contain 9-patch versions of any iOS non-retina stretchable backgrounds. Use 9patch.fokkezb.nl to generate Android 9-patch versions for any iOS background by simply specifying its left and top-cap. Since the mdpi density matches with non-retina, it can use them from
For xhdpi you can use the same resolution as retina on iOS. So just copy all iOS retina images and strip out the
@2x. And again, don’t forget to replace stretchable backgrounds with 9-patch versions.
The hdpi density is 75% of retina on iOS. So you’ll have to copy the
res-xhdpi folder and resize all images down 25%.
Even more Android folders
You think 3 Android folders is a lot? There’s also
res-xxhdpi and then each of these 5 can be combined with targeting
long/notlong devices and
land/port orientations. That makes 20. My advice: ignore
xxhdpi and only use
land/port for full-screen backgrounds you need to get pixel-perfect. Most of the time all I have in these is the launch image that ticons.fokkezb.nl generated for me.
You now have minimized the amount of assets you package with your app. But these assets can be compressed to win even more space. For this I use ImageOptim, a free Mac OS X app. Images generated by ticons.fokkezb.nl all already compressed, but it doesn’t hurt to use the app on all assets right before you package it.
Next to the tools I already mentioned, I also use a JMK file for Alloy that automatically generated non-retina and Android images whenever I add or change a retina one. I probably should turn that into a ti-assets NodeJS script some time :)