Custom splash screen ios

Ionic Framework ionic-v3
1

Hi, on my app i use custom splashscreen for each screen sizes, i changed each pictures in resources/ios/splash and resource/android/splash, but when i build ios my splash arent used and if try to copy all my splashscreen in platform ios, it work, but not for ipad.

So how it work when we must use custom splashscreen for each screen size?

2

You can try ionic command to automatically generate splash screen image files for each screen size.

ionic cordova resources

You need only one big splash screen image file (1024 x 1024?) inside your resources iOS folder and run the command.

3

Yes but on my splash screen i have some element on top and bottom of screen, so when i generate it, some of my splashscreen hide this elements…

1 Like
4

Alternatively, you can make your own HTML & CSS splash screen:

This will always take full width of your screen.
I went this way because animated splash screen is better & more professional. I’m working hard to completely remove Ionic’s stock splash screen feature from my app.

2 Likes
5

Thanks , i will look at this, it’s seem simpler.

1 Like
6

There are mainly two ways. I think the first method on Coursetro works better.

2 Likes
7

The second seem work independantly of app and seem better.

1 Like
8

this way is awesome, but i still need a splash before my app is loaded, this html css splash need my app already running

9

You can set static splash screen to 0 on your config.xml. You don’t need two splash screens…

I set splashscreen delay time to 0 and static screen is now gone.
I see this animated HTML page on start however Cordova still show 0.2 second of blank white screen before showing this HTML page so I’m trying to get rid of it.
Let me know if you’re successful in doing this.

10

i set

Even with that it still wait my html/css/js is loaded to work, and in my prod version it take 3/4 seconds.
I think it could work nice on small app, but on big app it still need natif splash during app loading.
I dont know how a html splash could be show before all html/css/js is loaded.

Finally i changed my splash picture.

Thanks

1 Like
11

Yes, it still has loading time so Josh Morony’s tutorial suggests to use white background for HTML splash screen.

So when your app starts, this will make smooth transition:

white blank screen -> white background html & css loading screen -> your app’s first page

But no one knows how to create a completely animated splash screen without issue like this yet.
Ionic team said they’re working on a new native layer for Ionic v4 and will work on this problem.

12

A white screen before, it work for 0.2 sec, for 3-4 sec it become confusing for user experience, but so finaly i changed my static splash for a centered logo.

Thanks.

1 Like