Customizing the splashscreen / launch image


#1

Hello everyone.

I’m having a hard time making the splashscreen work. According to this tutorial http://learn.ionicframework.com/formulas/splash-screen/, if you want to prevent the splashscreen to auto-hide, you have to set AutoHideSplashScreen to false in platforms/ios/cordova/lib/defaults.xml, but this file doesn’t exists, so instead I edit platforms/ios/cordova/defaults.xml but it doesn’t do anything. I also tried to edit the config.xml file at the root of the project but it’s the same.

I’m using Cordova 3.6.3-0.2.13 and Ionic 1.2.5

Also, why would you edit the files in the platform folder? What if you want the same splashscreen for all the platforms?


Splashscreen failed build
How to create a splash screen
#2

Hi @BobVance - I had a nightmare when first trying to get the Splash Screens to work. Fortunately Cordova has recently made it much easier with 3.6. The http://learn.ionicframework.com/formulas/splash-screen/ tutorial is out of date. As you say, it is not right to be editing content in the actual platform’s folder!

The new method allows you to define the Splash Screens in the main config.xml file like you can with the icons. I just followed the instructions in the Cordova docs

DevGirl posted an article about this recently too

Ionic team - it would be great if you could update te tutorials so as to avoid any confusion - and judging by the number of posts on this forum there certainly has been a lot of confusion when it comes to the SplashScreens.


#3

Thanks you very much, that’s way better.

But do you know why <preference name="SplashScreenDelay" value="10000" /> doesn’t work?


#4

Pinging @mhartington :wink:


#5

Sorry, not sure why the delay isn’t working. Been a while since I played around with that setting.

Looking at the Cordova site, it seems that setting is mentioned in the docs for 3.5 but no longer there in the docs for 3.6

I just show the Splash Screen at startup and then hide it prgrammatically once I’ve loaded whatever data I need.

You could also just use a timeout programmatically to achieve the same effect as that setting - something like:

app.run(function($cordovaSplashscreen, $timeout) {
   $timeout(function() {
    $cordovaSplashscreen.hide()
  }, 5000)
})

#6

Thank you @edd, it works


#7

Formula’s been updated :thumbsup:


#8

Hi @mhartington - it doesn’t seem to have updated. It’s still referencing the images in the platfroms folder and defaults.xml and doesn’t mention anything to do with the new Cordova 3.6 way of adding the image references into the root config.xml…


#9

Yeah that won’t be added to the formula. Something like that would be a new formula. The learn site will be updated and reworked in the near future so this will be something we can do then


#10

Ok, thanks for the clarification.


#11

@edd where would be the place to put this code? Which file is what I mean.


#12

@TJL - sorry for the rather late reply! It would go in the app.js file