Mobile Resources (images and icons)

Now that we have the Aurelia project integrated in the Cordova project and can successfully build and deploy to mobile devices, it is time to get rid of the default Cordova icon and splash screen image and replace them with something a little more to our liking.

Resource Files

Anyone who has built an app for Android or IOS understands the pain and frustration of having to create and integrate the voluminous number of image assets that each platform requires.

In my travels I have discovered a handy online tool to help ease the pain. It isn't perfect, but it is close and can certainly remove hours of resizing, cropping, and configuring these images.

Before we get to the tool itself we must create two image files. One for our icon and one for our splash screen. I'm not a photoshop expert so I won't even go there. I will leave it up to you to cobble together some cool images for your app.

What I can tell you is that the images should be relatively high resolution and quality. The online tool is going to re-size them and crop them to certain parameters so you should also strive to keep your artwork and message in the center of the image and do not use the entire canvas. Leave a relatively large margin around the edges. I achieved relatively good results using a 1024 x 1024 icon image and a  2208 x 2208 splash image. I also saved them as png images so that they are lossless and can be easily resized.

I suggest you save these files in the root/res folder. This is not required, but it is a good place to keep them so that if you require them in the future they will be easy to find.

Now that we have created our two base images it is time to let the online tool do it's magic.

1. Open your browser to https://www.resource-generator.com and follow the instructions.
2. Choose your two files and then click the big green button.

   

   
   

3. The generator is going to crunch away and produce a zip file and a configuration segment.
4. Copy the configuration segment and paste it into config.xml file in the root of your project.
   
   
   
   
   
   

   

   
   
5. Download the zip file that contains the generated resource files.

   

   
   

6. Open the zip file and you will see two png files and a res folder. NOTE: These are not the same png files you uploaded, but resized versions to be used in our app. Do not save them to the res folder because they will overwrite our high res versions. If you want to save them to the res folder then you should first rename the originals.
   
7. Copy the icon.png and save it somewhere handy. We will be converting it to an ico file a little later.
8. Create a new folder in the root of our project called images and copy the splash.png to this folder.

   

   
   

9. Open the res folder in the project root.
10. This folder contains an icon directory and a screen directory. Delete both of these directories. They contain the default Cordova resource files.

    

    
    

11. Open the res folder in the zip file.

    

    
    

12. Copy the icons and screens directories into the res folder in the root of our project. NOTE: The directory names are a little different than the originals (they end in s). This is by design. Do not change them back to singular!

    

    
    

We now have all of our mobile resources inserted into our project. The res folder contains all of the images needed by the Cordova Android project and the Cordova IOS project. If you decide to use the splash screen in the Cordova browser project, it will use the splash.png in the new images folder.

Next is to replace the favicon.ico file in the root of our project.

1. Open your browser to https://icoconvert.com and follow the instructions.
2. Choose the icon.png file that we saved to a handy location earlier.
3. Click the Upload button and let the tool do it's magic.
4. You can crop your image or apply a style if you desire. I am just leaving my image as is.
5. Select the 'favicon for your website' option

   

   
   

6. Click the Convert ICO button
7. Click the link to download your new ico file
8. Delete the existing favicon.ico file from the root of the project.
9. Copy the downloaded file to the root of the project and rename it to favicon.ico

Now we have our new image assets in the res folder and a new favicon that will be used when we run our project in a browser. Last thing to do is run cordova build from the command prompt. This will copy all our root/res images to the correct locations in the Android project and the IOS project.

1. Open a command prompt in the root of our project.
2. Run command cd www
3. Run command cordova build
4. Run command cordova run android
5. We should see our new images on the splash screen and the app icon should be replaced with our new image.
   
   
   

   

   
   

6. Run command cordova run browser
7. We should see our new favicon in the browser tab (you may have to refresh the browser to replace the old cached image)

   

   
   

NOTE: The resource configuration data that we inserted in the root/config.xml file instructs the Android project and IOS project how to link the various assets for each project. Take note of the path in the instructions. It uses the icons and screens (plural) directories that we copied from the downloaded zip file. If you make any changes to the res directory or to the resource configuration in the xml file then you must run cordova build to push these changes to the appropriate Cordova projects!

That wraps up the resources portion of this blog. If you are interested in learning more about Android resources you can start reading here. Xcode may complain about a couple of missing resources depending on the version of Xcode. Sometimes the resource tool is lagging behind recent screen resolutions used by Apple. There is a good tutorial here if you are interested in learning more.

I think it is time for another beer ... :)

Next up is adding and integrating Electron to our project.