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.
Losing weight
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/assets and app/lib where ever I use Resources.
Resources/images
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.
Resources/iphone/images
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.
Resources/android/images/res-mdpi
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 /Resources/images.
Resources/android/images/res-xhdpi
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.
Resources/android/images/res-hdpi
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-ldpi, 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 ldpi and xxhdpi and only use long/notlong and 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.
Compression
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.
Automation
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 :)