Titanium Tips

Status Bars Begone!

Ugly status bar that should be removed
When submitting an iPhone or iPad app to the App Store, you have the option of including up to 5 screenshots of your app in action. These screenshots are one of the primary pieces of information people have to decide whether or not to download your app, so you should try to get them right.

A simple thing Apple suggests is to remove the status bar from your screenshots before uploading them. (For the uninitiated: the status bar is the tiny (typically gray or black) bar along the top of your iDevice that has the battery, signal strength, clock etc.)

This is a simple thing to do, but it always amazes me how so many developers just fail to do it. Even big budget developers often still have the status bar showing in their app screenshots. I don’t know if they just forget to do this, aren’t aware or just can’t be bothered, but leaving in the status bar can make your screenshots look a tad amateurish, in my opinion. I don’t want to know that you took your app screenshots on two-bars of AT&T 3G service at 3:04am with a 22% full battery - I just want to see the pics of your app. Read More...
Comments

iPhone Dimensions - Portrait

It’s often handy to know the size of the standard iPhone User Interface (UI) elements.
You know, the Status Bar, Nav Bar, Tab Bar, etc.

Here you go...

iPhone Dimensions (Sizes) - Portrait

So, if you want an image to fill the Main Content Area, it needs to be 320 pixels wide by 367 pixels high.

Note: these measurements are for standard, non-Retina displays. Titanium uses these measurements regardless of what devices you are working with. If you want to support the Retina display, you just have to include doubled versions of your images.

For example...

File Name Display Type Dimensions
"image.png" Standard 320x367 pixels
"image@2x.png" Retina 640x734 pixels


In case you can’t make sense of the graphic...
iPhone Portrait Width 320px
iPhone Portrait Height 480px
   
Status Bar Height 20px
Nav Bar Height 44px
Main Content Area Height 367px
Tab Bar Height 49px
   
Keyboard Height 216px
iPhone Portrait Keyboard Size 216px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

iPhone Dimensions - Landscape

The iPhone in landscape orientation has one special exception to the standard sizes of iOS User Interface (UI) elements. The Nav Bar is usually 44px high, but in this case it’s 32px high.

Here are all the dimensions...

iPhone Landscape Dimensions

If you want an image to fill the Main Content Area, it needs to be 480 pixels wide by 219 pixels high.

Note: these measurements are for standard, non-Retina displays. Titanium uses these measurements regardless of what devices you are working with. If you want to support the Retina display, you just have to include doubled versions of your images.

For example...
File Name Display Type Dimensions
"image.png" Standard 480x219 pixels
"image@2x.png" Retina 960x438 pixels


In case you can’t make sense of the graphic...
iPhone Landscape Width 480px
iPhone Landscape Height 320px
   
Status Bar Height 20px
Nav Bar Height 32px
Main Content Area Height 219px
Tab Bar Height 49px
   
Keyboard Height 162px
iPhone Landscape Keyboard Size 162px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

iPad Dimensions - Portrait

Here’s the size of the standard iPad User Interface (UI) elements. You know, the Status Bar, Nav Bar, Tab Bar, etc.

iPad Dimensions Portrait

The good thing about the iPad (so far) is that there is no Retina display to worry about - so no @2x images are required.

If you want an image to fill the Main Content Area, it needs to be 768 pixels wide by 911 pixels high.

In case you can’t make sense of the graphic...
iPad Portrait Width 768px
iPad Portrait Height 1024px
   
Status Bar Height 20px
Nav Bar Height 44px
Main Content Area Height 911px
Tab Bar Height 49px
   
Keyboard Height 264px
iPad Portrait Keyboard Size 264px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

iPad Dimensions - Landscape

Size of the standard iPad User Interface (UI) elements in Landscape orientation.

iPad Dimensions Landscape

The good thing about the iPad (so far) is that there is no Retina display to worry about - so no @2x images are required.

If you want an image to fill the Main Content Area, it needs to be 1024 pixels wide by 655 pixels high.

In case you can’t make sense of the graphic...
iPad Landscape Width 1024px
iPad Landscape Height 768px
   
Status Bar Height 20px
Nav Bar Height 44px
Main Content Area Height 655px
Tab Bar Height 49px
   
Keyboard Height 352px
iPad Landscape Keyboard Size 352px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments