iOS startup screen image zooming in? - iphone

I'm getting my app ready to submit to the app store and have been reading the guidelines on the startup screen. It seems apple prefer it to be something that makes it look like your app is already loaded even when it isn't.
I decided to use the background image of my app as the startup screen. That way the skeleton of the app will be there and the buttons and text will load in.
I used a copy of the image but renamed it to Default-568h#2x.png.
It works but when it launches, it has that default zoom affect but it seems to zoom in bigger than the actual image size and so doesn't transition nicely into the app.
Any ideas why this happens and what I can do?
Thanks


On the iPhone, the default.png image should contain the status bar (if it is visible in your app).
On the iPad, the status bar shall be left out.
Thus, the default image size should be (source):


This could be an issue with the status bar being included or excluded in the Default images. According to apple all the iPhone Default.pngs should have the status bars included while iPad should have the status bar left out. (Unless of course your application hides the status bar)


OK, I found a way around this.
I found out that the status bar at the top is 40 pixels for retina and 20 for non retina.
I then created a black background in the size of the full iphone 5 resolution. I then got my startup image (actually the background for my app) but resized it down 40 pixels vertically.
I then put this on top of the black background I created and lined up the bottom.
I then merged the layers and used this as the startup image. It worked perfectly, the startup image loads up and then my app opens up right on top of it perfectly aligned.

Related

iOS launch image and status bar

In an iOS app, historically, the launch image was supposed to have a 20/40px unused area on top where the status bar would appear during app launch. In my app, I would just have a while stripe there.
Now I'm adapting my app for 4" screens, I've provided a Default-568h#2x.png image with an identical stripe. It does not work the way it used to (at least on the simulator) - the stripe appears below the status bar, and the rest of the image is shifted down.
Am I supposed to crop the image now? The screen size, however, is 640x1136, exactly like the suggested launch image size. If I crop the status bar from the top, what will go in the bottom?

I have had the same problem, looks like it may be a bug when Xcode chooses the right image for 568h. Try removing the images and adding them back to the project with copying them to the folder and then adding them to project.

How to Center a Splash Screen

I'm converting an app from the iPhone to the iPad. The splash screen picture is the right size but when I enter the app after about half a second the picture goes from being perfectly sized to having the bottom and right areas out of screen and white areas above and to the left of the picture. How do I get it to stay in the screen the way it's loaded and not moved out of the screen?

The way it's loaded is probably from a default picture (Default.png). This picture is taken from the iPhone version and is being scaled. You can't make it so that this picture stays.
Check the autoresizingMask and frame properties of your view/picture and maybe also the bounds property.

This seems to be a problem with the status bar:
Maybe you did hide it in the iPhone version, and now you should hide it again for the iPad. Check the info.plist of your app

Correct colour display of Default.png on iPhone

I'm using the Default.png method to create a splashscreen. I'm using the same file for my background and the Default.png (except default.png has the 20 pixel status bar at the top).
However, the iphone isn't displaying them in them the same. The Default.png is being displayed darker than the background, so it's painfully obvious when the app is loaded.
As a visual example of what I mean, please see below:
The image on left is the Default.png whereas the image on the right is when the app has loaded. The difference looks subtle here but when the whole image changes, it looks quite drastic.
Is this an issue with the colour-formatting of the pngs? Or is this an iOS feature whereby the Default.png appears slightly darker anyway?
It's probably not worth mentioning but I'm using Monotouch to develop my app, I doubt that would have anything to do with this.

I had a problem like this after editing a screenshot with OSX's Preview to cut out the status bar (as needed for iPad splashes). Preview sticked a color profile, and splash screen appears darker than the real thing in device.
If you open the image with GIMP, it shows a dialog offering to convert the color profile to SRGB. Take it (press "Convert") and save the image. This fixes the color difference.

Solved the problem. The designer sent me new versions of the backgrounds and the Default.png is now displaying the correct colour.
I have a feeling I had saved the previous version with a different colour profile to the background, hence why it was being displayed differently.

iOS Default.png status bar not drawn over

This is probably something simple but I'm having a problem with my Default.png file. I created it using the XCode organizer to take a screenshot and having it assign it as the Default image. According to this post (Best way to create Default.png image for iPhone app) iOS is supposed to draw the real status bar over top of the status bar in my Default.png but that's not happening; it shows two status bars stacked on top of each other until the app completely loads and everything is normal. This is distracting and obviously looks like crap.
I've tried hiding the status bar during startup and reenabling it during application:didFinishLaunchingWithOptions: but the status bar in my Default.png is still at the top.
I'm sure it's something simple but I can't figure it out.

Apparently the XCode screenshot tool takes a screenshot that's conveniently just a little too tall, making it safe to trim off the top. I cut the status bar out of the picture using Seashore and it's all good now.

Is your Default.png 320 x 480 pixels in size? (You can use the Inspector in Preview to show the size.)

Best way to create Default.png image for iPhone app

Originally I though I'll just take a screenshot of my app on the iPhone then tweak it in Photoshop.
The images should be 480 x 320 according to Apple doc, and the dimensions of my screenshot are 480 x 320. But, the screenshot contains notification area (where reception bars, battery life, etc. are displayed)
So, if I chop that part off my image will be a bit shorter and not 480px high.
What do I do? Submit a shorter image? Stretch it up so it's 480px but without the notification bar? Submit it with the notification bar in the image?
How did you create your Default.png?

There is support in Xcode for creating the default image. With the device connected, open the Organizer (Window > Organizer). Click the Screenshot tab, take a screenshot and click "Save as default image..." Choose your project and bingo jingo, you're done.

You can leave the notification area in the screenshot. The iPhone will draw the real notification bar over it.
iOS 7 update: the iOS 7 Transition Guide explicitly requires this:
Update the launch image to include the status bar area if it doesn’t already do so.

I think the best way to do it is to use the Xcode screenshotter & edit some of the GUI elements out, like the artwork or text on your buttons so people don't get frustrated when pushing 'buttons' on the Default.png doesn't make your app respond.

If you have a status bar, then you should design 320x460 (less 20 pixels).
Though it is correct that you can leave it at 320x480 and have the real status bar paint over the default.png, it will look weird when the phone is in Internet tethering mode or has a call on hold (another 20 pixels).
By cropping to 320x460, it looks better when in tethering mode.

Just edit out the notification area to match the background of the rest of the image. As long as your image is 480x320 you should be fine.
However, if your app takes more than a few seconds to load, you may want to rethink using a screenshot of your app as the startup screen. People might get confused and think the app is finished loading, when in fact it is not. I've seen some apps produce a "stylized" version of their UI in Photoshop, making it clear that it's just an image and not the actual UI.

you should remember that you maybe need also some space for an In-Call status bar or the Tethering status bar. this bar has a height of 20 pixels. Even apple does not make it right. Put a call on hold and start "Photos" or the "Weather" app, then you can see what I mean. To test that you can use the menu "Toggle In-Call Status Bar" in the iPhone Simulator app.

you can use a real 480x320 image if you add the boolean key UIStatusBarHidden to your Info.plist file and set it as true.

Take a screen shot as many of the answers already mention. However, if your screen shot includes the status bar, you should remove it/replace it with a transparent strip instead. It is true that the iPhone will cover this part of Default.png with the current status bar however, if you run the iPhone app on the iPad, you will still be able to see this part of Default.png.

I built a slightly modified version of the initial view in IB, ran the app with that and took a screen shot. That way, everything looks very iPhoney, no Photoshop needed. Don't worry too much about clipping the top, it will mirror how the view actually looks when loaded if more stuff covers it.
Apple recommends something similar to what the user will see when the app loads. E.g. for my Sudoku app, instead of the grid, the default.png shows a "please wait" message. When the app is loaded, that disappears and you see the grid you can interact with. It looks fluid, and it's obvious when it's loading and when you can interact.
Finally, the interface uses some toolbar buttons. In the default.png they are in the disabled state (grey text). When the app is loaded, they are enabled and change color.