Titanium Tips

Creating Universal Titanium Apps

Creating Universal Titanium Apps
Titanium Mobile 1.7 has introduced the long-awaited capability to create Universal apps that work natively on both iPhone and iPad devices. To get things going you’ll need to be using Titanium Studio Release Candidate 1 or newer, since Titanium Developer v1.2.2 unfortunately doesn’t yet support Universal apps.

Here’s a recommended way to prepare a Universal app...

1. Open Titanium Studio RC1 or greater.
You can download from here if you haven't done so already.

2. Create a new Titanium Mobile Project and ensure that you tick both the iPhone and iPad checkboxes during the setup process.

Tick both iPhone and iPad checkboxes


3. A default Titanium Mobile app will now be created and it should work at full native resolution on iPhones, iPod touches and iPads. Go ahead and test your app on the iPhone and iPad Simulators. It should work correctly on both.

Choose the iPad or iPhone Simulator
Default Titanium Mobile Universal App
How the default Titanium Mobile app should look on both iPad and iPhone.

4. The following default image files for your app’s icon and splashscreens will have been created in the “Resources/iphone” folder. Edit/replace them for your app as necessary.

Default icons and splashscreens of a Universal app
Note that, by default, the only icon created is the 57x57px icon for the standard iPhone display.
Before submitting to the App Store, you’ll need to add icons for the iPhone Retina display and iPad. Optionally you can add icons for Spotlight and the Settings pages too.


5. If you’ve got a very straightforward app that will be virtually the same on both iPhones and iPads, then your app’s code can be common to both devices and you can just write your ‘app.js’ code as normal. But if you’re creating an app that uses a different user interface setup for both types of devices (as would/should be the case with the vast majority of apps), you’ll need some extra steps...

6. Replace your app.js file with the following code:

if(Ti.Platform.osname === "ipad"){
        Ti.include('app_ipad.js');
}
else{
        Ti.include('app_iphone.js');
}

7. Then create two new files: ‘app_iphone.js’ for all your iPhone code, and ‘app_ipad.js’ for all your iPad code.

The code snippet in Step 6 detects what type of device is being used. If it’s an iPad, it uses the ‘app_ipad.js’ code and if it’s an iPhone, it uses the ‘app_iphone.js’ code. This is a simple way to break up the structure of your Universal app.

8. That’s it! Your app should now be able to earn the much coveted App Store + icon.

Note: I haven’t tested this process with a live app on the App Store yet, so can’t be sure that it will work perfectly. Icon naming for iPhone and iPad looks like it might potentially cause some troubles. If you use these instructions and would like to share your experiences, they would be most welcomed in the comments below.