Automatically Generate Resized Icons and Splash Screens with Ionic Framework

Rather than manually generating or cropping different size of images of icons and splash screens for different resolutions, orientation and platforms, we can use Ionic Framework to do this work for us. Ionic will use its resizing and cropping server to do this. We will need a recent version of Ionic CLI.

Below are the steps to do this:
1. Prepare the source icon or splash screen file
For icon file:
- the file is named with 'icon' and has either .png, .psd or .ai extension type (i.e. icon.png, icon.psd or icon.ai)
- image's minimum dimensions should be 192 x 192 px
- rounded corners will be applied for specific platforms (e.g. iOS)

For splash screen file:
- the file is named with 'splash' and has either .png, .psd or .ai extension type (i.e. splash.png, splash.psd or splash.ai)
- image's minimum dimensions should be 2208 x 2208 px
- the artwork should be centered within inner 1200 x 1200 px area

2. Use a new or existing Ionic project to do this job
To have the Ionic server doing the resizing and cropping, we will need to put the file inside an Ionic project.

3. Make sure we have the intended platform on the Ionic project.
To add a platform, run ionic platform add command in the root folder of the project, for example:

C:\MyLabs\IonicTemplate\SideMenu>ionic platform add android

4. Create 'resources' folder on the root of the project

5. Put the icon or splash screen file in the folder

6. Run ionic resources command at the project root
To generate icons, run ionic resources --icon command (with double dash characters), below is a screenshot:


To generate splash screens, run ionic resources --splash command (with double dash characters), below is a screenshot:


7. Get the icons from 'resources/PLATFORM_NAME/icon' folder or the splash screens from 'resources/PLATFORM_NAME/splash' folder

Generating Android Release Keystore for Visual Studio Apache Cordova Project

Below are the steps to generate an Android keystore for publishing a release version of an app built using Visual Studio Apache Cordova:
1. Make sure you have Java SDK installed.

2. Run keytool command like below:

keytool -genkey -v -keystore YOUR_KEY_NAME.keystore -alias KEY_ALIAS -keyalg RSA -keysize 2048 -validity 20000

Use greater than 10,000 days (i.e. 20,000 days) validity to avoid expiration issue when uploading the package to Google App store.
For example:

C:\Program Files (x86)\Java\jdk1.7.0_55\bin>keytool -genkey -v -keystore c:\users\rical\my-release-key.keystore -alias rical_blog_app_key -keyalg RSA -keysize 2048 -validity 20000

Then you will be prompted with some questions:

Enter keystore password: *****
Re-enter new password: *****
What is your first and last name? 
  [Unknown]:  Rical Wirawan 
What is the name of your organizational unit? 
  [Unknown]:  Organisation
What is the name of your organization? 
  [Unknown]:  MyOrg
What is the name of your City or Locality? 
  [Unknown]:  MyCity 
What is the name of your State or Province? 
  [Unknown]:  NSW
What is the two-letter country code for this unit? 
  [Unknown]:  61 
Is CN=Rical Wirawan, OU=Organisation, O=MyOrg, L=MyCity, ST=NSW, C=61 correct? 
  [no]:  yes 

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days 
        for: CN=Rical Wirawan, OU=Organisation, O=MyOrg, L=MyCity, ST=NSW, C=61 
Enter key password for  
        (RETURN if same as keystore password): 
[Storing my-release-key.keystore] 

3. The key file will be generated in the specified folder.

4. If you use a recent version of Cordova CLI, open build.json file in the root folder of the project. If it does not exist yet then create the file manually. Then put the details in the file, continuing our example:

{
 "android": {
     "release": {
         "keystore":"C:\\users\\rical\\my-release-key.keystore",
         "storePassword":"*****",
         "alias":"rical_blog_app_key",
         "password":"*****",
         "keystoreType":""
       }
   }
}

If your Cordova CLI version is less than 5.0, open ant.properties file (under 'your_project_name\res\cert\android' folder). Then put the key details in the ant.properties file, continuing our example:

key.store=c:\\users\\rical\\my-release-key.keystore
key.alias=rical_blog_app_key
key.store.password=*****
key.alias.password=*****

6. Build the app in Release mode with Device or one of Android emulator platforms option. Do not use any of the Ripple emulators option.

7. The package will be created inside 'bin/Android/Release' folder. The file to be deployed to Google App store is the one that does not end with (-unaligned.apk), e.g. "android-release.apk".