Add A Splash Screen To An IonicFramework Project

It is always nice to have splash screens in your application.  It is a great way to get your branding out, and show that your application is currently loading.  No one likes to see a blank white screen for five seconds during launch.

Lucky for us, it is incredibly simple to add a splash screen to our Ionic project.  Using Apache Cordova’s Splashscreen plugin, we can add a splash to our application with just two lines in our config.xml file.

If you haven’t already, add the iOS and Android platforms to your IonicFramework project:

To take advantage of Apache Cordova’s splash screen plugin, add it to your project by running:

Now this is where the Cordova documentation gets a little sketchy.  It claims you must add the following to your config.xml, but yet it doesn’t work.

Instead you must change value=”splash” with value=”screen”.  When you’ve done this, your Android and iOS builds will display a splash screen on application launch for 3000 milliseconds.  You can alter this time with whatever you’d like or dismiss the splash screen at the end of your $ionicPlatform.ready() method by running navigator.splashscreen.hide()

You can find the splash screen images in the platforms/android/res and platforms/ios/{project_name}/Resources/splash directories.  For Android, you must navigate to each of the screen density / orientation directories to make your changes.

Recommended splash screen sizes are as follows:


Platform Orientation Resolution
Android MDPI Landscape 480×320
Android MDPI Portrait 320×480
Android HDPI Landscape 800×480
Android HDPI Portrait 480×800
Android XHDPI Landspace 1280×720
Android XHDPI Portrait 720×1280
iPhone Retina Portrait 640×960
iPhone Portrait 320×480
iPad Retina Portrait 1536×2048
iPad Portrait 768×1024
iPad Retina Landscape 2048×1536
iPad Landscape 1024×768

You can find more information regarding icons and splash screens via Apache Cordova’s official documentation.  A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Remi

    Thanks for this. Very concise

  • marc

    each time i try to build android .. the config.xml removes the lines i added and add this

    what should i do

    • Hi Marc,

      How exactly are you trying to build? What version of Apache Cordova and Ionic Framework are you using? Is the config.xml file the one at the root of your project or one in your Android platform directory?

      I don’t think the build process should be changing your config.xml file.

      Please let me know the answers to the questions I asked, and we will go from there.

      Thanks,

      • marc

        im using the config file in myapp\platforms\android\res\xml
        and i build using ionic build android
        ionic cli 1.2.5
        cordova 3.5

        • Hi Marc,

          Thanks for providing more information!

          The two lines mentioned in my post should go in the config.xml file located at the root of your project. In your case myapp\config.xml. During the build process for Android and iOS, many files in your platforms\android and platforms\ios directory will get replaced. This is just how the CLI works.

          Please let me know if altering the myapp\config.xml file works for you.

          Cheers,

          • marc

            Thankss
            it worked
            but .. i replaced all screen images in all folders by my screen .. but it still shows the default splash
            any suggestion ?

          • Hi Marc,

            I’m glad it worked!

            The splash images that you added have the same file name as the defaults did correct? Did you make sure to replace the splash image in the plain drawable folder? Can you also confirm that these images were not overwritten in the build process (they shouldn’t have been)?

            My guess is you missed a directory when placing your images. Happens to me all the time.

            Cheers,

          • marc

            Thanks alot for your help !
            i uninstalled the app and renamed all images to screen.png in all folders and rebuilt the app
            but still gives me default image i dk how !!

          • I have a new idea if you’re positive your custom screen.png images are not being replaced after build.

            I’m wondering if your resources are being cached in the build process. What happens when you delete the following directories (and all contents) from your project:

            myapp\platforms\android\ant-build
            myapp\platforms\android\ant-gen
            myapp\platforms\android\CordovaLib\ant-build
            myapp\platforms\android\CordovaLib\ant-gen

            It is a manual way to clean your build files. Then when you run ionic build android, it should be fresh.

            Let me know how that goes.

          • marc

            Weww
            it workedd 😀 !
            Thanks alottttt :))

          • Sweet!!!

            I’m glad everything is good now 🙂

  • Ken

    Thanks – I really couldn’t understand why the splashscreen wasn’t showing on Android – your instructions worked a treat (I had to change value=”splash” to value=”screen”). I’d spent hours on this, thanks!!

    • Hi Ken,

      I’m glad my instructions helped you!

  • It was helpful Man. (y)

  • bs atta

    not splash screen working in my project 🙁

    • What is the error in your logs?

      • bs atta

        i donot knw what error occur because my application run but splash page not show in my app in starting , i also added splash plug in and wrote two lines of code in config.xml and follow ur artical but splash page not show , i am sending my file through mail sa check ur mail

        • bs atta

          i am sending files on ur ([email protected]) email address check and tell me what error occur please 🙁 i will be thankful to

          • bs atta

            check ur mail please sir

        • Hi,

          That is not my email, so I won’t receive anything you send to it. I don’t distribute my email in an effort to consolidate relevant communications.

          With that said, if the splash is not showing, there should be an error message in your logs. If you’re unfamiliar with checking your logs, please follow this tutorial:

          https://www.thepolyglotdeveloper.com/2014/12/debugging-android-source-code-adb/

          Without seeing the logs, this issue will be impossible to troubleshoot.

          Regards,

  • Nanduk S

    Splash sceen loading check network?

    • I really have no idea what you’re asking. Please try again.

  • RS

    Hi Nic, nice tutorial one question i have followed your steps and get the following error on ios platform:

    addCliHookDirectory fs.chmodSync: Error: EPERM, operation not permitted ‘hooks/after_platform_add/010_install_plugins.js’
    addCliHookDirectory fs.chmodSync: Error: EPERM, operation not permitted ‘hooks/after_plugin_add/010_register_plugin.js’
    addCliHookDirectory fs.chmodSync: Error: EPERM, operation not permitted ‘hooks/after_prepare/020_remove_sass_from_platforms.js’
    addCliHookDirectory fs.chmodSync: Error: EPERM, operation not permitted ‘hooks/after_plugin_rm/010_deregister_plugin.js’

    Any ideas?

    • The errors you pasted are not related to this tutorial. It appears you have problems with the setup of NPM / Cordova / Ionic.

      What operating system are you using, and were you successful in building even the most basic application? It will help in the troubleshooting process.

      Regards,

      • RS

        Hi Nic,

        yes the basic application gets built, I am using Mac OSX Yosemite

        • Just to confirm, you are developing on a Mac correct? You cannot add or build for the iOS platform without being on a Mac computer.

          Regards,

          • RS

            Thats correct Nic, I am on mac i can build fine for mac using sudo before the commands but its a problem emulating on ios

          • If you have to use sudo at any time in your Ionic / Cordova development process, your tools were not installed / setup correctly.

            With that said, if you’re able to build the project, navigate to platforms/ios/ and open the Xcode project file. Then run the project from there. You probably won’t be able to emulate directly from the Terminal without resolving your other problems.

            Regards,

          • RS

            what is the best order to install the tools in?

          • On my Mac I installed in the following order:

            1. Xcode
            2. Android
            3. NodeJS / NPM
            4. Cordova
            5. Ionic Framework

            However, it isn’t really the order that matters, it is how you chose to install them. It is hard to mess up the permissions for step #1, but steps #2 through #5 could have different results depending on how you did them. If you’re having to use sudo, your permissions are not correct and it is more than likely a problem with NPM, Cordova or Ionic Framework.

            You might look at this official tutorial from Ionic:

            http://ionicframework.com/docs/guide/installation.html

            Regards,

          • RS

            Thanks!

  • t3es

    Thank you, man ! That’s very helpful. I would like to add video as my splash screen, do you have any idea on how I can accomplish this ?

    • I don’t think this is possible with the actual splash screen. I think you’d have to implement your own logic to display a video, maybe in a splash controller.

      Regards,

  • Harshita Balaga

    Thanks for the info, could you please tell me how I can add my own splash screen image instead of the default one?

    • platforms/android/res/drawable*
      platforms/ios/[project_name]/Resources/splash

      The asterisk on the drawable directory means any directory that starts with drawable will have a splash image.

      Regards,

  • Фаёзжон Бердиев

    Nic hi please suggest how to set android max build target?

    • I don’t understand how this is relevant to splash screens. Can you please explain?

      Regards,

      • Фаёзжон Бердиев

        Its not. Im just wondering about build process.. How to set the build target on ionic? Can you help to find out ? =)

        • All non-relevant questions or comments must be directed at my Twitter account.

  • Nabin K. Neupane

    Is there a way to show progress bar like in native android or spinner in splash screen to show the actual progress of opening app?

    • I don’t believe so. If you want to add progress indicators, you can make your own fake splash screen via a controller and do all your loads in the controller.

      • Nabin K. Neupane

        Would it be efficient to do so? My app is taking a lot of time to load. I just want to make user patient by showing progress bar. Will you explain a little bit about making fake splash screen?

  • AP

    Is this now built into ionic (http://ionicframework.com/docs/cli/icon-splashscreen.html)? Their documentation however do not tell how to hide the splash screen and go to the home screen. Config.xml was updated as expected (as per your blog) when I tried doing ‘ionic resources’. I tried hiding it using your method with no luck and the splash screen with a spinner is shown forever. Logs show no error at all.

    • Yes, this feature has been included with the Ionic CLI in 2015.

  • Senthil

    How can i add animation in splash screen? or how to add .gif file in splash screen??

    • I don’t think this is possible. The only way I can think of is to disable the splash screen and craft your own via the first view and controller.

  • Andrien Pecson

    Hi Nic I have a question. How can I display three splash screen one after another?

    • That would not use the splash screen plugin. You’d have to create three views set on a timer and change them when appropriate.

  • Jorge Cacho

    I have an odd issue using this pluging.

    On a windows machine Splash Screen is showing OK on the device when I execute ionic run android but the same code is showing a black screen on the same device if executed from a Mac machine (the same code on the same Mac Machine shows the correct Splash Screen on a iOS device).

    This is:

    Windows + Android = Splash Screen
    Mac + Android = Black Screen
    Mac + iOS = Splash Screen

    The code is the same in all three test and I have the same plugings installed.

    Some extracts from config.xml:

    Al files exist at resources/android/splash/

    I have debuged the device (at Mac machine) using Google Crome Inspector and the Console shows no error. I have also executed adb logcat *:W but I find no error or warning related to the Splash Screen (you can find adb output at http://pastebin.com/fk8qimsV , app is com.jorgecacho.familiaalbertiana)

    I have tried to remove and add again the plugin but the error is still there. Do you have any clue?

    Thanks in advance,

    • With the latest version of Ionic, this tutorial is no longer necessary as Ionic will do this for you.

      Best,

      • Jorge Cacho

        Which is the part done by Ionic? Generating the differente splash images or showing the splash screen?

        I’m using Ionic CLI to generate splash images but is ionic also able to show Spash Screens? The plugin is no more needed?

        Thanks

        • The latest ionic will generate the images and install the plugin

          • Stephen

            I’ve used ionic cli to generate icon and splashscreen resource files. The icon is working and the splashscreen is not. I’m seeing a black screen on load. I’ve tried on Samsung and Zenfone 2 real devices. The lines are as you suggest in the config.xml, the plugin is listed in the project from the ionic cli and the images generated in the Android splash directory look ok. Any ideas?

          • You shouldn’t need to change any configurations with the latest version:

            http://ionicframework.com/docs/cli/icon-splashscreen.html

            Regards,

          • Stephen

            You know, it’s odd. On the development build it just showed a black screen for the default three seconds and then showed my first screen. On the production build however it goes black, fades in the splashscreen for a second and then fades black again before launching the app proper. It could be a phone setting but I’ve seen it on two separate phones now. Sure it’s no big deal really. Thanks for answering 🙂

          • No problem

  • SENTHIL

    Hi, I need to animation in splash screen. Could it be possible in Ionic framework?

  • jome

    is there any way for adding loading bar in splash screen instead of loading spinner..

  • Hari Krishna

    is it also same as Ionic 2? Please help me how to add splash screen in Ionic 2. I am newbie in ionic framework.

  • Ya Ya

    Error: Registry returned 404 for GET on https://registry.npmjs.org/org.apache.cordova.splashscreen
    What does it mean? I error this when I add splashscreen. How can I solve it?

  • Abdul Wadood

    i appreciate your efforts to write this nice tutorial for splash screen.
    Please! Write a tutorial to explain the following common issues.
    1- Splash screen with full view(no status bar)
    2- after splash, show instruction screens.
    3- after skipping or finishing instruction screen, show the application with side menu.

    if you cannot manage to write a similar nice tutorial then please mention some guide lines to achieve the aforementioned goals.
    Thanks!