Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Both Android and iOS have very specific guidelines on what an icon for your application should look like, as well as at what dimensions you should provide your icon. Appcelerator has some general information about creating application icons in their wiki, but the steps below go into a little more detail. 

http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure#TheApplicationProjectStructure-Applicationicon

  1. Apple's icon guidelines: http://developer.apple.com/library/prerelease/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
  2. Android's icon Guidelines: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
    Since each OS has its own unique style of icon, a good approach is to create one icon for each, and save it at all the different required dimensions. 
    For iPhone and iPad:
  3. Create an iOS icon at 512 x 512 (This size is used during the app submission process)
  4. Save for iPhone at 2 sizes in the Resources/iphone folder, one for standard res (57 x 57) and one for Retina Display (114 x 114), such as iPhoneiconApplicationIcon.png & iPhoneicon@2xApplicationIcon@2x.png. Titanium recognizes that adding @2x just before the file extension indicates that this asset is for retina display.
  5. Save for iPad at 72 x 72 pixels
    Warning

    Incomplete - Work in Progress

Creating Splash Screens

  1. , naming it ApplicationIcon_72.png
  2. Create an Android icon using the guidelines in Android's UI Guidelines.
  3. Save three resolutions of the icon in android/images/<high | medium | low>/ApplicationIcon.png. 72 x 72, 57 x 57, and 48 x 48. Note: The high, medium and low folders might not yet exist, so you need to create them.
  4. In Titanium Developer, select the project on the left, select "Edit" in the top of the window, and set the "Application Icon" field to "ApplicationIcon.png".
  5. When creating your iPad app, you might need to manually select the icon.
  6. Test in the emulator to see if the icon shows up (you may need to delete the contents of the build/android folder, but not the folder itself. You may need to delete build/iphone, which is safe.)

Creating Splash Screens

Every platform utilizes a splash screen, an image that shows briefly while the application is loading. Since different devices have different display resolutions, the only attributes that should necessarily change with each splash screen are the dimensions. However, you can customize your splash screens as much as you'd like for different platforms and devices.

  1. Create a standard portrait orientation splash screen in your graphic editor. It's probably easier to start with the biggest size, so if you're supporting iPad, you'll create a 768 x 1004 graphic (1004 instead of 1024 because of the status bar).
  2. Save as <project-root>/Resources/iphone/Default-Portrait.png (This should always be the name of the file for iPad)
  3. Rotate the image 90 degrees and change the size to 1024 x 748, re-arrange elements as necessary
  4. Save as Resources/iphone/Default-Landscape.png (now both iPad splash screens are complete)
  5. The process will need to be repeated for several more resolutions, listed below. 
    Tip

    When saving your different resolutions of splash screens, you'll be overwriting default splash screens created by Titanium when you created your project. For Android, these defaults are located in Resources/android/images/ and in several folders named like "res-long-land-hdpi"

Matrix of Splash Screen Resolutions

Platform

Resolution

Orientation

Long?

Width

Height

Path

iPad

 

Portrait

 

768

1004

/iphone/Default-Portrait.png

iPad

 

Landscape

 

748

1024

/iphone/Default-Landscape.png

iPhone

Med

Portrait

 

320

480

/iphone/Default.png

iPhone

Retina

Portrait

 

640

960

/iphone/Default@2x.png

Android

High

Portrait

True

480

800

/android/images/res-long-port-hdpi/default.png

Android

High

Landscape

True

800

480

/android/images/res-long-land-hdpi/default.png

Android

High

Portrait

 

480

800

/android/images/res-notlong-port-hdpi/default.png

Android

High

Landscape

 

800

480

/android/images/res-notlong-land-hdpi/default.png

Android

Med

Portrait

 

320

480

/android/images/res-notlong-port-mdpi/default.png

Android

Med

Landscape

 

480

320

/android/images/res-notlong-land-mdpi/default.png

Android

Low

Portrait

True

240

400

/android/images/res-long-port-ldpi/default.png

Android

Low

Landscape

True

400

240

/android/images/res-long-land-ldpi/default.png

Android

Low

Portrait

 

240

320

/android/images/res-notlong-port-ldpi/default.png

Android

Low

Landscape

 

320

240

/android/images/res-notlong-land-ldpi/default.png

Tip

Since a splash screen is likely to change, and there are so many versions of the image, it would be a good idea to create a macro (or Photoshop Actions) to automatically generate all the different sizes.

Stylizing the Application

...

In titanium, when creating new "View" objects, or any UI object, a 'create' method accepts an object containing style attributes (and sometimes value attributes). The style.js creates the foundation for the object to be passed into the create method, which can be appended if additional values need to be passed in at creation time. For a reference of common properties of view objects, view the Titanium API documentation for Titanium.UI.View: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.View-object

For example:

In style.js:

Code Block
javascript
javascript
titleLabel: {
    color: '#000'
}

...