iOS

How to Add Splash Screen in Your iOS App


Before moving onto another detailed tutorial about Storyboard, I’d like to first answer a couple of questions left in comment or in our forum. One question is:

How can I add a splash screen for my app? Is it difficult to do?

While you may think you need to write code for the splash screen, Apple has made it extremely easy to get it done in Xcode. No coding is required. What you just need to do is to make a couple of configuration in Xcode.

What’s Splash Screen?

For those who are new to programming and haven’t heard of the term “Splash Screen”, let me first give a brief explanation about it. Splash screen is commonly found in iOS apps, as well as, other desktop applications. This is the first screen you see when launching an application. Usually, splash screen is an image covering the entire screen and disappears after the main screen is loaded. Below figure shows you a few samples of splash screen:

Sample iOS Splash Screen

Sample Splash Screens / Launch Images

The primary purpose of splash screen is to let user know your app is loading and give user an introductory screen showing your brand. Splash screen is especially important for apps that take longer time to launch. Perceptually, it gives a better user experience.

Adding Splash Screen in Your App

As mentioned earlier, it’s not required to write any code to display the splash screen. iOS comes with a built-in function called launch image. This image is automatically displayed when user opens the app and disappeared until the app is fully ready to use. You can simply specify your splash screen as launch image in Xcode and it will handle the rest for you.

Preparing Your Splash Screen

As you know, iPhone 4/4S supports a higher screen resolution (what so called Retina Display). In order to support both screen resolution of older iPhone models and latest models, you have to prepare two versions of splash screen images of these sizes:

  • 320 x 480 (for iPhone 2G / 3G / 3GS)
  • 640 x 960 (for iPhone 4 / 4S)
For the sake of simplicity, I’ll show you how to add splash screen in iPhone app. In case you’re building an iPad app, you can refer to Apple’s iOS Human Interface Guideline about the launch image size and naming convention.

The splash screen image should be in PNG format. By default, you should name the image file for lower screen resolution as “Default.png”. For the image intended for Retina Display (i.e. 640 x 960 screen resolution), name the file as “[email protected]”. The “@2x” is a standard scale modifier used in iOS. All image files designated for displaying in Retina Display should name with the optional string “@2x”.

Instead of using “Default” as the file name of launch image, you may change it to your preferred one. The name of the launch image is defined in your app’s Info.plist file. Use our Simple Table app as an example, you can add a new property called “Launch image” in the SimpleTable-Info.plist and specify the preferred file name (say, MyLaunchImage).

Xcode Change Launch Image Name

The change instructs iOS to pick “MyLaunchImage.png” and “[email protected]” as launch image.

You can design your own splash screen. For testing purpose, you may download the sample splash screens.

Default Splash Screen

Splash Screen for Our Simple Table App

Add Your Launch Image in Xcode

After preparing the launch image, go back to Xcode and open your Xcode project. Here we’ll continue to use our Simple Table project. Right click the “SimpleTable” project and select “Add Files to SimpleTable”. Add both “Default.png” and “[email protected]” to your project.

Add file to Xcode Project

Add File to Xcode Project

If you’ve done everything correctly, you’ll see both files in your project and Xcode automatically recognizes the files as launch images.

Launch Image Added in Xcode

Launch Image added in Xcode

Test it Out!

Simply run your app again. This time you’ll see a splash screen shown up instantly as it runs. For now, there is not much thing to load during application startup. (Note: the splash screen only shows up for a second and disappears.)

Simple Table App Splash Screen

Further Information

In this really short tutorial, we show you how to add a simple splash screen (aka launch image) in your iPhone app. The launch image we use is in portrait orientation. What if you’re design an app in landscape orientation? How should you name the launch image? I high recommend you to check out Apple’s programming guideline for App Launch Image for further information. iOS supports various versions of launch image with different naming convention. So check it out and learn more about it.

As always, leave me comment to share your thought about the tutorial.

iOS
A Beginner’s Guide to Presentation Controllers in iOS 8
macOS
macOS Programming: Working with Dark Theme and Building a BMI Calculator
iOS
Using AsyncDisplayKit to Develop Responsive UIs in iOS
  • Tekle Derso

    Wow! This is so elegant. No sweat doing it at all.


  • Alan

    AlanAlan

    Author Reply

    Thanks for the great tutorial!

    As an FYI, my splash screen wasn’t showing, so I added a sleep function to the Launch Options and that made it visible.


    • Sudheer Chekuri

      my splash screen is showing but displaying only 2 seconds. I want ti display until load the url. could you please help me


  • Roche

    RocheRoche

    Author Reply

    I think it’s even more interesting to add that like you said, it enhances user experience. Let’s say your splash screen is exactly the same screen you have after the app is loaded. The user will immediately think the app is loaded, however it is not and when it is loaded, you won’t see a different. Thus, you can make the app “act” like there is no loading time at all 🙂


    • Shriti

      ShritiShriti

      Author Reply

      i too have same problem. no error is shown but the splash screen is not displaying.


  • agleung

    agleungagleung

    Author Reply

    I think it is simpler to drag the png pictures to the Launch Images spaces in the project summary. No need to modify info.plist either.


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Thanks for the tip. The reason I mentioned about info.plist is for reference only. Normally we do not need to edit it, unless you want to change the name of launch image.


  • June

    JuneJune

    Author Reply

    hmm… i like your tutorial 🙂
    very easy for beginner to learn..
    the splash image is not displaying.. y huh? @@


  • Dennis Schmidt

    Sorry, but this is bad advice. Apple explicitly says not to abuse the launch image as a splash screen…
    http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1


    • Chris

      ChrisChris

      Author Reply

      Correct.

      I came here to say just this, and to see if I had perhaps missed a major design sensibility change with iOS 7. It seems not, and this is good.

      Succinctly: the reason WHY Apple really, really, really advises against a splash-screen is speed. If you cannot achieve speed, and need a second to load files/data, the recommendation is to give the _illusion_ of speed, by making a “splash” screen consist of a blank version of the opening screen (e.g. a UITableView, etc.).


    • Supertecnoboff

      Oh come on, it can’t be that bad. For example look at the Tiny Wings app made by andreas illiger. The splash screen in that app is only on for about 2 seconds so you know who the hard working developer is behind the app. Is this really so bad?? Surely developers can take a bit of credit for themselves via the splash screen (not for advertising or anything, but just for recognition of their work)????


  • bubudrc

    bubudrcbubudrc

    Author Reply

    how can we do an animated splash screen?? (two o more images / video)


  • shailesh

    shaileshshailesh

    Author Reply

    Nice tutorial 🙂


  • aamir khan

    aamir khanaamir khan

    Author Reply

    great tutorials
    thanks


  • aamir khan

    aamir khanaamir khan

    Author Reply

    very helpfull


  • ASK

    ASKASK

    Author Reply

    i’m getting a warning………can somebody help please!
    the screenshot is below


  • ChrisR

    ChrisRChrisR

    Author Reply

    How about a small edit/update taking into account the resolution for iPhone 5 also? The file should have a resolution of 640 × 1136 and be named [email protected] to show up automatically like the other two.


  • Ravikumar

    RavikumarRavikumar

    Author Reply

    this tutorial is excellent
    and Please send me NSTimer example with two end points and calculate the two ends using timer in iphone?please please send me this example quick


  • Daniela

    DanielaDaniela

    Author Reply

    Great article! Design plays a key role in the app store acceptance process. Publishing an application it can be a complex and frustrating process to carry out. I recently read this ebook that focuses on the main design principles to keep in mind when creating an app icon and splash image.
    Check it out!
    http://www.apps-builder.com/pag/ebook/icon


  • Pothiraj

    PothirajPothiraj

    Author Reply

    nice


  • Faizan Khanani

    nice


  • Hamidreza Ghaderi

    tnx Simon,give me your mail please 🙂


  • web designer jobs in chennai

    Thanks for sharing this blog


  • Никак Никакая

    полная херня а не описание


Shares