iPhone Tutorial for Creating a Splash Screen

Introduction:

Some people asked me about creating a splash screen in iPhone. So today I am going to write a simple tutorial on creating splash view for your application. I will write another post on good looking splash page as well. Its really a small thing but have a really good impact on your users.

So lets use this image as your splash screen (This is Skype application splash screen)

splash iPhone Tutorial for Creating a Splash Screen

Step 1:Create a new Xcode project and name it Splash. Open the SplashViewController.xib file and change the background colour to white. Run the application and you will see a black screen appear before it shows you white screen.

Step 2:Drag the above image in to your resources file. Rename the file to Default.png. Run your application, you will see that this image will be a splash screen for your project (Its so easy !). So the concept is that sdk provide you a way to display user something before your application loads fully into memory. So default.png file basically shows user that something is coming and give iPhone time to load resources required for the application into memory. You can add any image on your application and name it Default.png and it will become your starting (splash/default) screen.

Now you want that your splash screen will be displayed around 2-3 seconds before it display the main screen to user or you want to load something from server. So to do that, I am going to use model view which will be shown to user and hide after 3 seconds. You can customized it if you want to hide it from code either then using fixed time.

Step 3:In SplashAppDelegate.m file write this line at the end of applicationDidFinishLaunching method.

[viewController showSplash];

Step 4:In your SplashViewController.h file write these two methods definitions and also add a IBOutlet variable.

IBOutlet UIView *modelView;

- (void)showSplash;
- (void)hideSplash;

Step 5:Write the following code at the end of SplashController.m file

-(void)showSplash
{

UIViewController *modalViewController = [[UIViewController alloc] init];

modalViewController.view = modelView;

[self presentModalViewController:modalViewController animated:NO];

[self performSelector:@selector(hideSplash) withObject:nil afterDelay:2.0];

}

//hide splash screen

- (void)hideSplash{

[[self modalViewController] dismissModalViewControllerAnimated:YES];

}

Step 6:Now you have to map modelView inside Interface builder. (Watch video to better understand this) Drag a view to your SplashView

Step 7:Add the UIImageView to new view and change the image name to Default.png. Map this to modelView in SplashController.

Splash Screen code

You can grab this code from here.

Now watch me doing it

Popularity: 83% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

38 Comments on "iPhone Tutorial for Creating a Splash Screen"

  1. mamatha says:

    nice tutorial!!!!

  2. Eric Law says:

    Very good

  3. alones says:

    Thank for your good tutorial. :) It’s simple but very helpful.

  4. Madan says:

    very good for beginner……..

  5. Maykel says:

    where I can control the splash screen time on this tutorial to make visible for a little more or less?

  6. Adeem Basraa says:

    @Maykel,
    Look at this line
    [self performSelector:@selector(hideSplash) withObject:nil afterDelay:2.0];

    Change the delay to more or less to yours needs :)

  7. Maykel says:

    Hi

    Thanks for the tip, I have another question for you please?

    where i can find if you know a tutorial that help to make and understand a calculation process

    My Idea:
    two entry-field: –to write in any number as input.–
    one label: –to get the result from the number in the input field–
    One button: –to execute the action. (plus, less, multiplying or dividing calculation)–

    any tip or idea will be great help.

    again thanks

    Maykel

  8. Chris says:

    Hi,

    Is it possible to apply this code to an Tab Bar Application? I have tried with the Tab Bar template but I get errors..

  9. Chenks says:

    yes i would also like to know how to do this with a tab bar app?

  10. Adeem Basraa says:

    @Chenks & Chris
    I uploaded a code for tab bar splash screen. You can get it from http://adeem.me/code/TabBar-Splash.zip

    So this code will add the splash view on the tab bar controller, if you didnt understand the code and want a complete tutorial please let me know.

  11. Sokleen says:

    It would be awesome, if you could make it in to another tutorial!

    I wrote the code for the splash screen like yours in my app, and it builds without erros. But when I run the app, the screen is black and after a few seconds OS X gives me a crash pop up ? :S

  12. Adeem Basraa says:

    @Sokleen,
    Can you please look into the code attached with this post or email me your test code at info at adeem.me ?

  13. Mahadevan S says:

    Just the thing I was looking for..Thank you very much

  14. Wally says:

    Do you have an example where you programmatically make the tab bar then add the splash screen. I am having a hard time getting this to work with a coded tab bar.

  15. mms says:

    Thanks for this tutorial, but……oops!! I just discovered a typo!!
    In step 5, the method “showSplash”:

    modalViewController.view = modelView;

    The “modelView” here should be “modalView”.

  16. PT says:

    This was the starting point I needed to get a splash screen working. My ‘first view’ in the tab controller is a UINavigationController, but I soon figured out the minor changes required. Note: remember to add [modalViewController release]; at the end of the -showSplash method (is production code).

    Thanks.

  17. Al says:

    Awesome tutorial, but how do you make this work on an existing application?
    I have a simple DrillDown App called … er … DrillDownApp so I have RootViewController.h and .m DrillDownAppAppDelegate.h and .m and DetailViewController.h and .m as classes.
    Do I add code to RootViewController.h or .m or do I need another View and if so how do I get from that View to the RootViewController.

  18. twister says:

    just i look ,thanks

  19. Ricardo Mola says:

    Hi , let me ask you , I follow you step by step in my application , but does not work for me.

    I dont understand what’s happend , my app start but not show my splash screen …

  20. Ricardo Mola says:

    One more point , i put a breakpoint in my appDelegate and showSplash but they don’t get in in this function (showSplash)… so this screen show very fast….

  21. PDC says:

    I can’t get this to work. I get a viewController undeclared error. Can anyone help?

  22. Ty says:

    @mms

    What are you talking about? The method is SplashViewController.h is IBOutlet UIView *modelView;

    Thus SplashViewController.m is modalViewController.view = modelView;

    You can change these to whatever name you want. As long as these two lines of code match.

    Btw, I want to ask something. I think I messed up something in IB because everything works as advertised EXCEPT the splash screen loads very quickly regardless of what I change the afterDelay to.

    Somehow the View that is receiving afterDelay is the original iPhone View and not my new View.

    So what happens is my splash quickly loads then the white iPhone view stays white for the duration of afterDelay.

    Somehow my own View is not receiving the afterDelay.

    Can’t wrap my head around the problem.

    Any ideas?

    Thanks

  23. Ashish says:

    Nice and simple article.

  24. Kinara says:

    Salaam Brother,

    Thanx for the great tutorial. I have a question on animated Splash Screens. How do we show some animation or a quicktime movie or something as a Splash Screen?

    Thanx

  25. ristin says:

    This is aweeeeesome!!!!!!!!! :D
    Can you be my private online teacher?
    I’m a newbie on programming and i really wanna to have an iphone application created by myself!!!
    Would you kindly please teach me step by step how to command a button to navigate to another page? And, do i need to add a new file in the same project (but i don’t know which folder to add it to >..<
    ristin

  26. ristin says:

    In order to create a new page, do i need to add a new file in the same project, which folder should i add it to?
    Once i create that page, how can i add 5, for example, different images on that page?

  27. ristin says:

    One more question, how can i add a button which can let people to turn the image to its backside? Thanks!!!

  28. FarOasis says:

    My splash screen behave very differently than expected…
    Instead of showing the splash view for few seconds it shows the main window…
    I ended up putting my splash image in the main window (without any need to do any mapping in the Interface builder and it works.

    Granted I am doing something wrong here and if someone have any clue what it might be I would be more than happy to know what I did to mess things up.

    I should probably mentioned that I have started from an existing project I have and not from a brand new project as outlined in this tutorial.

    thanks.

  29. Jason says:

    I have the same problem as described by Sokleen previously. Any ideas?

  30. Ashish says:

    Once we are done with modelView, can we release the resource here itself. Let me know if I am wrong.

    - (void)hideSplash{
    [[self modalViewController] DismissModalViewControllerAnimated:YES];

    //release the modelView
    [modelView release];
    }

  31. deyan says:

    a great tutorial!!!
    may i know where should i put the code, if i need to process something before the splash screen disappears?

    [self presentModalViewController:modalViewController animated:NO];
    //process here?
    [self performSelector:@selector(hideSplash) withObject:nil afterDelay:5.0];
    //or should i process my things here?

    thanks.

  32. Clive Smith says:

    Seems weird why you would do it with so much code, why not just add a sleep(5); to the delegate in the Bool which pauses the splash screen for a few seconds?

  33. Aniruddh says:

    @Clive Smith,

    sleep() function blocks the main thread causing the UI to freeze up. One should instead schedule some action to be performed later using -[NSObject performSelector:withObject:afterDelay:]

  34. Add this line below the presentModalViewController to stop the splash from droping 20pixels on load i.e below. This will allow it butt up against the status bar and not drop :-)

    [self presentModalViewController:modalViewController animated:NO];
    self.modalViewController.view.frame = CGRectMake(0, 0, 320, 480);

  35. Alex says:

    Thanks for this tuto.

    This works well when the iphone is in vertical mode… but if the app is launched when the iphone is in horizontal mode? The image are different and in this example only one image is used.

    Thanks one more time!

Trackbacks for this post

  1. Creating a Splash Screen Tutorial for iPhone - iDevKit
  2. d a n i e l k . o r g » Blog Archive » Mac, iPad, iPhone, iOS Development
  3. How to create an iPhone Splash Screen « iFlexus Blog

Got something to say? Go for it!