Icon and Splash Screen Image Generation from the CLI

ionic-v1
1

We just added a feature in v1.2.14 of the CLI to automatically generate icons and splash screens using source files:

Icon and Splash Screen Image Generation

Give it a spin and let us know how it goes and what we can do to improve it. Thanks!

23 Likes
3 
Error : Cant override existing CLI . Do you know what you are doing?

I get this error message when I update ionic and run ionic resource --splash

4

Good addition - this will make the app development workflow a lot smoother.

Now, if only you guy had release this 2 days earlier! :smile:

1 Like
5

Not 1.2.4 but 1.2.14 :smile:

6

Yup, sorry, it’s in version 1.2.14

7

Awesome feature. Now i can reduce contents of my hooks folder.

1 Like
8

I get a couple of errors - below is the output to the console from the command ionic resources:

Ionic icon and splash screen resources generator
 uploading icon.psd...
 uploading icon.psd...
 uploading splash.psd...
 uploading splash.psd...
 âś“ icon.psd upload complete
 âś— Invalid upload: invalid image id
 âś“ icon.psd upload complete
 âś“ splash.psd upload complete
 âś— Invalid upload: invalid image id
 âś“ splash.psd upload complete

In the resources folder, the command creates folders ios/icon, ios/splash, android/icon, android/splash but they are empty.

9

How can we update to this CLI version?
I mean, as it’s note a release yet, how can we do it?

Thanx!

10

Hi Javi,

you have to update your ionic then it should be working

11

Thanks @Cmaden!

The things is that I was doing:
npm update ionic
instead of:
npm update -g ionic

12

No Problem @Javi
Glad it help

13

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

2 Likes
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:

2 Likes
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?

1 Like
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/