Hi,
I don’t know where to put android splash screens. In the docs they always talk about www/res/screens but I don’t have that.
And I don’t know if I have to write something into config.xml to show the splash screens on android. And which config.xml because I have 2.
For iOS splash screen is working like a charm but I can’t get it to work for android
Yeah, splash screens can be a pain, especially for android.
What you want to do is create a 9-patch png and follow the steps on the plugin repo page.
http://plugins.cordova.io/#/package/org.apache.cordova.splashscreen
I’m pretty new to Cordova/Ionic, but this post helped me a lot:
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
It seems the CLI version of Cordova doesn’t copy icons and splash over to the right directories (despite what the docs say). The second script on that site does just that. This works well for me since I don’t want my platform directory in Git. I created a config folder with the icons and splash screens (which is included in my version control), and this hook will copy them over to the appropriate platform directories for me.
I’m also using the Install Plugins hook so that anytime I create a new platform the plugins that I need for that project are automatically added.
Hope it helps!
Thank you for your help but I don’t get it.
This hook think seams pretty complicated for me and I don’t understand why something fundamental as a splash screen doesn’t work perfectly in cordova!?
In the hook example they describe a path that i can’t find
Where is that config/android/res/drawable/icon.png
Further whats the matter with this android folder? there is a android folder in the app folder and there is platforms/android
There are similar files in it but why do I need that? it makes stuff so complicated for beginners.
@mhartington And why are the talking about to put the files into res/xml in the first link? shouldn’t the path be ‘platforms/android/res/drawable’ and the other drawable ‘paths’
and where is the main.java file?
Hmm, seems their docs are off a bit. I’m hoping to write something about this soon, there is a lot of confusion when dealing with this.
That would be great. It’s more complicated than the actual coding of the app and I think that shouldn’t be the case. Yesterday you (I mean the company) release and tutorial for app icons on learn.ionicframework.com. I like your tutorials really but in most cases you talk about iOS and iOS is the easier one. please talk in such tuts about android to. And please make the same tut for splash screens too =D
OK I worked the whole morning on this stuff.
First I have Cordova Version 3.5 and I worked with their docs for Version 3.5
Let’s first talk about icons:
I took this to code snippets:
<platform name="ios"> <!-- iOS 7.0+ --> <!-- iPhone / iPod Touch --> <icon src="res/ios/icon-60.png" width="60" height="60" /> <icon src="res/ios/icon-60@2x.png" width="120" height="120" /> <!-- iPad --> <icon src="res/ios/icon-76.png" width="76" height="76" /> <icon src="res/ios/icon-76@2x.png" width="152" height="152" /> <!-- iOS 6.1 --> <!-- Spotlight Icon --> <icon src="res/ios/icon-40.png" width="40" height="40" /> <icon src="res/ios/icon-40@2x.png" width="80" height="80" /> <!-- iPhone / iPod Touch --> <icon src="res/ios/icon.png" width="57" height="57" /> <icon src="res/ios/icon@2x.png" width="114" height="114" /> <!-- iPad --> <icon src="res/ios/icon-72.png" width="72" height="72" /> <icon src="res/ios/icon-72@2x.png" width="144" height="144" /> <!-- iPhone Spotlight and Settings Icon --> <icon src="res/ios/icon-small.png" width="29" height="29" /> <icon src="res/ios/icon-small@2x.png" width="58" height="58" /> <!-- iPad Spotlight and Settings Icon --> <icon src="res/ios/icon-50.png" width="50" height="50" /> <icon src="res/ios/icon-50@2x.png" width="100" height="100" /> </platform>
<platform name="android"> <icon src="res/android/ldpi.png" density="ldpi" /> <icon src="res/android/mdpi.png" density="mdpi" /> <icon src="res/android/hdpi.png" density="hdpi" /> <icon src="res/android/xhdpi.png" density="xhdpi" /> </platform>
So my first Problem was that I didn’t understand about what res folder they were talking. I thought about they icon tutorial on your learn site and made an icon folder in the root directory in my project folder. But thats different to their instructions and so the confusing starts.
But after a while i figured it out and thats my solution for now but it would work with an icons folder in root directory the same way. You only have to change the paths.
config.xml
`
<!-- iPad -->
<icon src="www/res/icons/ios/icon-76.png" width="76" height="76" />
<icon src="www/res/icons/ios/icon-76@2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="www/res/icons/ios/icon-40.png" width="40" height="40" />
<icon src="www/res/icons/ios/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="www/res/icons/ios/icon-57.png" width="57" height="57" />
<icon src="www/res/icons/ios/icon-57@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="www/res/icons/ios/icon-72.png" width="72" height="72" />
<icon src="www/res/icons/ios/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="www/res/icons/ios/icon-small.png" width="29" height="29" />
<icon src="www/res/icons/ios/icon-small@2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="www/res/icons/ios/icon-50.png" width="50" height="50" />
<icon src="www/res/icons/ios/icon-50@2x.png" width="100" height="100" />
</platform>
<platform name="android">
<icon src="www/res/icons/android/ldpi.png" density="ldpi" />
<icon src="www/res/icons/android/mdpi.png" density="mdpi" />
<icon src="www/res/icons/android/hdpi.png" density="hdpi" />
<icon src="www/res/icons/android/xhdpi.png" density="xhdpi" />
</platform>`
I made my OWN res folder in my www folder and I had to change the path for the icons!
I know its not complicated but its so confusing. Ionic tells you to make an icons folder in root but cordova docs talk about an res folder and there are many res folders. In platforms, in ant-build and so on so its pretty confusing. But i figured it out now. I hope it helps some beginners because for me it was pretty frustrating. And sorry for my english but I am from austria. I hope its understandable what I am talking about.
so lets move to splash screens:
They tell you to make a folder www/res/screens and then they have this snippets:
android/screen-hdpi-landscape.png android/screen-hdpi-portrait.png android/screen-ldpi-landscape.png android/screen-ldpi-portrait.png android/screen-mdpi-landscape.png android/screen-mdpi-portrait.png android/screen-xhdpi-landscape.png android/screen-xhdpi-portrait.png
ios/screen-ipad-landscape-2x.png ios/screen-ipad-landscape.png ios/screen-ipad-portrait-2x.png ios/screen-ipad-portrait.png ios/screen-iphone-landscape-2x.png ios/screen-iphone-landscape.png ios/screen-iphone-portrait-2x.png ios/screen-iphone-portrait.png ios/screen-iphone-portrait-568h-2x.png
I did that but I don’t know how to define them in config.xml
So i tried it without defining but the build fails.
Error:
The following build commands failed: CpResource UFC\ Obritz/Resources/splash/Default-Landscape~ipad.png build/emulator/UFC\ Obritz.app/Default-Landscape~ipad.png CpResource UFC\ Obritz/Resources/splash/Default-Landscape@2x~ipad.png build/emulator/UFC\ Obritz.app/Default-Landscape@2x~ipad.png CpResource UFC\ Obritz/Resources/splash/Default-Portrait@2x~ipad.png build/emulator/UFC\ Obritz.app/Default-Portrait@2x~ipad.png CpResource UFC\ Obritz/Resources/splash/Default-Portrait~ipad.png build/emulator/UFC\ Obritz.app/Default-Portrait~ipad.png
So the build task is looking for completely different icon names than the doku says you…why?
Why does that happen?
It doesn’t work like they are saying.
I could solve this problem when I copied all my splash screens to platforms/ios/Resources/splash and named it like the ones in the errors.
The same for android. I had to copy it by myself to platforms/android/res/and name it screen.png. The doku says I should add this two lines to config.xml
<preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="10000" />
and because of that I had to name the files screen.png (value=screen)
Now iOS Splash Screen is working but Android don’t.
I will add my solution if i find one.
It would be awesome if I could help someone to understand it a little bit better and if I am the only one who is confused about this “simple” things…help me please =D
Hey there! The splash screen tuts will be for both ios and android, for sure.
For the res folder, it is arbitrary. Cordova doesn’t care what the folder is called or where it is, just as long as it can find it and resolve the location of all the files. That part through me off a bit as well. So I figured I’d start separating things out into folders that people can under stand better, a little more semantic than res. File names are arbitrary as well.
For the splashscreen I had alway follow the same steps as you, copy/paste. Hopefully When I make my article, I can clarify a bit better than the cordova docs…which suck IMO
Hi @mhartington,
yes now I understand that the res folder is arbitrary but they never mention you should create a res folder or a folder and so every beginner will search for it in the folder structure like I did.
The point with your icons folder and cordovas folder was not a critisism on you but maybe you could add it in the tutorial that this folder can be “everywhere” and named everything.
Yes you are definitely right! The docs of cordova suck. And the big problem for beginners are phonegap vs cordova. If you search for your problems you often get solutions and you don’t recognize that it only work for phonegap.
IMO the way icons are handled are ok and it would be cool if it could be the same for splash screens. Define there location in config.xml and cordova will copy it like it does for the icons.
I found a problem in my solution. I changed it from myproject/www/res/icons to myproject/icons and from myproject/www/res/splashscreens to myproject/splashscreens like you did in your tutorial. Because if you have it in www the build task for iOS/android will copy the whole www folder and it so it would copy the android icons and splash screens too and thats unnecessary.
If you need/want help or have questions when you are writing the tut for splash screens I would be glad to help 
Oh no I understand. Hmm that is a good point. I can always add an amendment to the article to mention that the folder can be anything you want.
As for your solution, yes that is why I placed the folders outside of the WWW folder. This way they’re not copied over during a build.
I recently added support for icons and splash screens to the Ionic Yeoman Generator using a hook based on the one from the article @jmondragon mentioned that might be helpful.
The hook from that article hardcodes the asset paths, which have changed in newer versions of Cordova, so I created a hook that is more general purposed.
At a high level, my hook does the following:
platforms/ to local RESOURCE_DIR
RESOURCE_DIR back to platforms/
The benefit of this approach is that it ensures that your local (project root directory) RESOURCE_DIR will be pre-scaffolded with icons and splash screens generated by Cordova as placeholders only for installed platforms AND that any modifications to local assets are reflected in the correct Cordova platform/ locations, without having to hardcode file paths!
If anyone cares to use my hook outside of the Yeoman Generator, be sure to replace the templatized <%= appName %> variable with your application’s name on line 23, then run cordova prepare so the hook can scaffold out the appropriate files. Be sure to keep the file name conventions.
Hopefully someone finds this helpful!
Very nice @Diego, really impressive work there
I couldn’t agree more @roland!
Does anyone know if there are plans for Cordova or Ionic to add this functionality?
It would certainly help clear up the confusion there appears to be around Splash Screens. I think the Splash Screens definition and set up has been the most confusing thing in getting started with Ionic/Cordova. It seems overly complex and hard to follow, when it could be handled in the same manner as the app icons.
Thanks
Just read a response from @mhartington on this other thread relating to the Splash Screen. He mentions that as of Cordova 3.6, you can specify the Splash Screens via the config.xml as you can with the icons.
Great news.
Hi @edd could you post the link to this thread please. I couldn’t find it.
Hi @roland - sorry, I meant to post the link but forgot!
Hi Roland,
I agree that this stuff is awfully confusing when coming to it for the first time. Splashscreens are a ton better since Cordova 3.6.3, but icons still need work. I have icons and splash screens working on Android, and splash screens working on iOS, but I can’t for the life of me get the icons to work in iOS.
It’s very confusing because the examples have size values that differ from the standard files in my project (40x40, 60x60, 72x72), and older blog posts show even different “standard” sizes for iOS icons (like 57x57). I really don’t know what to try, but I’m working from Cordova Docs for 3.6.3 at the moment.
I have done something similar to you in the config.xml, but I am not providing a full set of icons (i am leaving some out). I am also using some dummy icons that might not be the perfect specified resolution. Perhaps these could be problems? This is what I have in the config.xml:
<platform name="ios">
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="www/res/icon/ios/icon-60.png" width="60" height="60" />
<!-- <icon src="www/res/ios/icon-60@2x.png" width="120" height="120" /> -->
<!-- iPad -->
<!-- <icon src="res/ios/icon-76.png" width="76" height="76" /> -->
<!-- <icon src="res/ios/icon-76@2x.png" width="152" height="152" /> -->
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="www/res/icon/ios/icon-40.png" width="40" height="40" />
<!-- <icon src="res/ios/icon-40@2x.png" width="80" height="80" /> -->
<!-- images are determined by width and height. The following are supported -->
<splash src="www/res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="www/res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
<!-- <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/> -->
<!-- <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> -->
<!-- <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/> -->
<!-- <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/> -->
<splash src="www/res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
</platform>Hi @marcsyp - I’ve got the icons working fine in my project using Cordova 3.6.3. The standard iOS icon size for iPhone was 57 and for retina was 57@2x before iOs 7.0. I used Michael Flarup’s icon design template http://appicontemplate.com/ to produce all the different sized icons and then reference them in the config.xml as you have. You should have image resolutions correct as it may cause problems otherwise. Also, I wouldn’t store the app icons in the www folder as you have though:
`<icon src="www/res/icon/ios/icon-40.png" width="40" height="40" />`
instead, I’d reference them as they are in the rows you commented out like so:
<icon src="res/ios/icon-76@2x.png" width="152" height="152" />
This is because everything in the www folder is copied across to the platforms folder and deployed when you do an ionic build/run ios which unnecessarily increases build time and increases the size of the resulting app.
Hope that helps!
@edd I did in fact get the icons working by providing a complete set and ensuring that all the resolutions were correct. I will move them out of the www folder, as you say though. I think the OP is correct that it is confusing that the docs use the “res” folder in the examples but don’t specify creating a new one in the root of the project. I assumed (like many others probably) that it should go in the res folder inside the www folder, which is how the original cordova project sets it up…
Anyway, all good now. Thanks.
Marc
Hi
@edd thank you for posting the link - it is working fine for me.
@marcsyp i totally agree - the icon sizes are very confusing. When I opened my project in Xcode it often claimed that there are missing some icons and I had to add some sizes there that I couldn’t find in the cordova docs.
I don’t really get why something important like icons and splash screens are such big problems and why are the docs so bad.
I think your problem was that you really have to provide all icons sizes but I can’t explain you why. Good to see you where able to get it working.
The tipp from @edd and me is very important. Move your splash screens and icons folders out of the www folder. I made that mistake and it increases the app size very much. But I totally agree that the docs should say that you have to create a new res folder in the root of the app. I fall into the same trap because of the unclear docs.