Icon and Splash Screen Image Generation from the CLI


#13

This is an awesome and super useful \ timesaver feature!
Well done guys.
Thank you.


#14

Thank you for providing this! Is there any way you could add a flag to create only portrait or only landscape splash screens. My app is locked in portrait view so it doesn’t need the landscape ones. It’s not a big deal but a nice to have. :smile:


#15

Just decided to try this feature out. (Android only so far). Two questions:

  • Unfortunately it seems it does not keep aspect ratio of the splash screen, so on my development phone the splash screen comes out looking squished and ugly… Any way around this problem?

  • There is now a new “crunch” step in the build process, that seems to take forever (compared to previous version my build times are about 3-4 times as long). Can this be speeded up?


#16

Same issue for me…

uploading icon.png...
 uploading splash.png...
 ✓ icon.png (1744x1744) upload complete
 ✗ Invalid upload: invalid image id: '3f08f02'

did anyone resolve this?


#17

Found the issue. Disabled the transparency of the splash screen image and it worked.


#18

Hello @adam ,

The resources generation works perfectly.
I have my icon on my android device. Bravo !!

Concerning the splashscreen it doesn’t display at all… even with a good generation.
My files are properly generated in the resources/android/splash/

The plugin is properly installed.

ionic plugin ls :
org.apache.cordova.splashscreen 0.3.5 “Splashscreen”

The config.xml is defined like that :

  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="auto-hide-splash-screen" value="false"/>
  <preference name="SplashScreenDelay" value="5000"/>

<platform name="android">
    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>

Do you have any idea about what I missed ?
Thank you.


#19

Awesome!

Do you know if this feature is planned for the Cordova CLI too?


#20

Hey, first off I love this feature, makes it way easier to handle icons and splash screens. Now i have a question which maybe a bit of topic but it has to do with the ionic cli. on the website of ionic.io i read that you can easily add crosswalk with this command: ionic browser add crosswalk but when i try this it says browser is not a valid task. is it because it’s not yet added to the cli?

Link to docs: http://docs.ionic.io/cli/crosswalk/


#21

I think it hasn’t landed yet in the CLI, please read the “What’s Next” paragraph at the end of this post: http://ionicframework.com/blog/automating-icons-and-splash-screens/


#22

Same problem with aspect ratio!


#23

Thanks for that tool, I was actually having trouble with handling the splash image for iPhone 6 and 6+, so this comes in at the right time !

So I tried a few minutes ago, using the .psd template provided in the blog post. Everything went well in the cloud, and I got all my images in ./resources/ios/splash/. I did a ionic build ios, went to Xcode and tested the app in the iPhone 6 simulator.

No luck. The images are there, the config.xml does point to the right images for the right sizes (not sure actually but it did update the config.xml) but no splash is displayed…

Am I missing something ?

BTW I’m using cordova 3.6.3-0.2.13


#24

OK on Windows with Android the splashscreen is not working.

I created a blank project : ionic start splash tabs
I copied the pictures in the resource folder.
I created the platform : ionic platform android

C:\Users\DEV\splash>ionic resources
Ionic icon and splash screen resources generator
 V icon android drawable-ldpi-icon.png (36x36) from cache
 V icon android drawable-mdpi-icon.png (48x48) from cache
 V icon android drawable-hdpi-icon.png (72x72) from cache
 V icon android drawable-xhdpi-icon.png (96x96) from cache
 V icon android drawable-xxhdpi-icon.png (144x144) from cache
 V icon android drawable-xxxhdpi-icon.png (192x192) from cache
 V splash android drawable-land-ldpi-screen.png (320x200) from cache
 V splash android drawable-land-mdpi-screen.png (480x320) from cache
 V splash android drawable-land-hdpi-screen.png (800x480) from cache
 V splash android drawable-land-xhdpi-screen.png (1280x720) from cache
 V splash android drawable-land-xxhdpi-screen.png (1600x960) from cache
 V splash android drawable-land-xxxhdpi-screen.png (1920x1280) from cache
 V splash android drawable-port-ldpi-screen.png (200x320) from cache
 V splash android drawable-port-mdpi-screen.png (320x480) from cache
 V splash android drawable-port-hdpi-screen.png (480x800) from cache
 V splash android drawable-port-xhdpi-screen.png (720x1280) from cache
 V splash android drawable-port-xxhdpi-screen.png (960x1600) from cache
 V splash android drawable-port-xxxhdpi-screen.png (1280x1920) from cache

I added these preferences in the confif.xml at the root of my project :

  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="SplashScreenDelay" value="10000"/>

I add the splashscreen project

C:\Users\DEV\splash>cordova plugin add org.apache.cordova.splashscreen
Fetching plugin “org.apache.cordova.splashscreen” via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.splashscreen
npm http 304 http://registry.cordova.io/org.apache.cordova.splashscreen
Installing “org.apache.cordova.splashscreen” for android

And on the ionic run android, it’s not working… on the android device. (Nexus 4)


#25

What are the source image’s dimensions, what format is it in, and what are the dimensions of the image that doesn’t maintain the aspect ratio.

Also, because you’re including more images in your build, Android and iOS will “crunch” the PNG files to be smaller. It’s a good thing because it makes your app a smaller download (but it does take longer to build because of it).


#26

Try adding this also:

<preference name="SplashScreen" value="screen"/>

The next CLI release will do this automatically for Android splash screens.


#27

Hello @adam thank you very much, it is working properly now.

So for others to recap, after a proper resource generation, the config.xml look like :

    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.splah338879" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>splah</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>

  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="android">
    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>

  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="10000" />
  
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
</widget>

#28

Oh cool idea! I’ll add that in quick and will probably be in the next CLI release. Thanks!


#29

my ionic version is 1.3.0-beta1 and i create ./resources, but I running “ionic resources”,show:
Ionic icon and splash screen resources generator
✗ icon source file not found in any of these directories: resources, resources/ios
✗ valid icon source files: icon.psd, icon.ai, icon.png
✗ splash source file not found in any of these directories: resources, resources/ios
✗ valid splash source files: splash.psd, splash.ai, splash.png
why?


#30

I am using your provided splash.psd template file, the dimensions are unchanged. I just put some graphics on a new layer.

Not sure which dimension is selected when I run the app, the phone has a normal 720x1280 px screen.

The crunch thing is a good thing, but not when it is done each build even if the image has not changed…!
If the result was cached somewhere it would be fine, but the way it is now it slows down development a lot.


#31

Hello,
I’m having some issues with this feature. I created my icon.png and splash.png using the provided PSD template and did create all icons and splash pages using the command line utility.
Then I noticed that there were some light blue lines behind the grid in the templates, so I recreated my PNG files and tried to run the command and here what I get:

$ ionic resources
Ionic icon and splash screen resources generator
uploading icon.png…
uploading splash.png…
✗ Error parsing upload response:

I tried to remove the resource directory, recreate, use PNG files without alpha channel, use the original PSD templates, nothing. I keep getting the same error showed above. Tried to update ionic but I’m already running the latest version:

$ ionic --v
1.3.0-beta1

Any help will be much appreciated


#32

I have exactly the same issue, with PNG ou PSD

ionic resources
Ionic icon and splash screen resources generator
uploading icon.psd…
uploading splash.psd…
✗ Error parsing upload response:

ionic --v
1.3.0-beta1

The command create sub directories resources/android/icon & resources/android/splash but they are both empty.