What splash screen sizes do you use and how to you incorporate them in your project?

ionic-v1
1

As the title already says.

I’m especially interested in the Android splash screens here. How do you guys add these splash screens to your projects? And how do you know you’ve covered all the different screen sizes?
Do you use a 9-patch image and if so, how did you make it?

Same question for the app icons.

Adding splash screens and app icons to an iOS project is pretty straight forward in my opinion but Android always bothers me somehow.

2

Hi Robin

You can make a 9 patch from the Android SDK util called draw9patch
see http://developer.android.com/tools/help/draw9patch.html

try this to generate your 9 patch
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

see also this link for a good explanation of 9 patch - not easy to get straight away
http://radleymarx.com/blog/simple-guide-to-9-patch/

the screen size doesn’t matter as much on android as 9 patch helps with what streches

the sizes for the android icons are 72x72 for High Density, 48x48 Med Dens, 36 x 36 Low Dens

IOS

splash sizes

app icons

spotlight icons

ANDROID

Hope this helps

Darren

2 Likes
3

This helps for sure! Thanks a lot @darrenahunter
But my question mainly related to ‘how do you add your splash screen files to your Cordova project’? As in, where do you put them and how do you make sure that Cordova picks them up correctly?

Before I’m getting al sorts of links to the Cordova docs; I already read them. Especially this page:
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

My problem with the docs is that they describe an other way to name your files and for instance for iOS, they describe 4 icon sizes while I can add a lot more icon sizes in Xcode.

How does that add up? It’s very confusing.

4

Hi @Robin, just to harp on what you already know. It could all get messy with splashscreens and icons sometimes, have had issues with android way back too. I do hope you know you need a plugin ($ cordova plugin add org.apache.cordova.splashscreen) for splashscreens now and then to configure for iOS: http://docs.phonegap.com/en/3.4.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

To specify the icons and splash screens in the file system without using XCode, copy the icons into the …/platforms/ios/YourApp/Resources/icons folder and splash screens into the …/platforms/ios/YourApp/Resources/splash folder.

OR just follow this nice post by Holly Schinsky about the topic - http://devgirl.org/2013/09/12/phonegap-icons-and-splash-screens-help/

I hope this helps to clear up issues for you a little!

5

@Robin for iOS splash screens, I’ve honestly just used Xcode to manage things at the platform level. If you have them all sized correctly, in iOS you can import them all in to an assets catalog and manage them there.

For android, its a little less great. I just make my 9 patch image in res/drawable just put it there.

As of now, I don’t think there is anything in the Cordova CLI that can help with splash screens. Its up to you to manage them and move them over.

6

I’ve put together some notes here that works for me on Android. I’ve only tested them on my Google Nexus 4 though.

See my Icons and Splash Screen Notes.

7

I’m prob. a little late to this one but, give this one a shot:

As well as this one for icons:

They both work great!~