Generating Splash Screens and Application Icons for NativeScript Mobile Apps

So you've created a fantastic mobile application for Android and iOS using NativeScript and you're getting ready to publish it to Google Play and iTunes. This is great, but more work probably needs to be done. For example, you probably don't want to use the stock NativeScript application icons – also called launcher icons – and splash screens.

We're going to take a look at automatically generating various graphics to be used within your NativeScript iOS and Android applications.

You can download a zip containing the finished project here.

Designing the Perfect Splash Image and Launcher Icon

Before we worry about sizing for particular devices and platforms, we need to create the graphic that we wish to use. For best results, let's focus on creating an application image that is 1024×1024 in resolution. This large image will be sized appropriately later.

My favorite tool to create images is Pixelmator for Mac, but you can use any image software that you'd like.

There are some things that you should consider when developing your images:

  • The image background should be a solid color or transparent.
  • The core image content should be smaller than the image edges.
  • The image borders should be straight and not rounded as the device platform will manage rounding.

Not only do the above guidelines help with the automatic generation process, but it will look better on the device. Below are some examples of previous applications that I had released to the various app stores:

NativeScript Icon Examples

You'll notice that I prefer the flat design, but that doesn't really matter. Take a look on your device at other applications to get an idea on what looks good versus what doesn't.

Using Free Image Generators for NativeScript Projects

At this point you should have a 1024×1024 image. When it comes to launcher icons, Android expects seven different icon sizes, one for each screen density. When I had first started to develop mobile applications, Android only had required three, but as you can tell, this number is subject to increase. As of right now, iOS expects seventeen different icon sizes.

If you have a lot of time to waste you can generate each of these twenty-four icon sizes by hand, but I recommend against it. If you're anything like me, you'll go through about one hundred icons before you find one you are satisfied with. Instead, you should make use of one of the available icon generators for NativeScript:

In summary, you provide your larger image to one of these services, and they will give you each of the sizes that you need for Android and iOS in return.

On a personal level, I used NativeScript Rocks for my own application, but both appear to do a good job at the image related task.

NativeScript Rocks Image Generator

Choose your image and make sure to provide a splash screen background color. Hopefully you didn't use gradients when designing your image, otherwise it may not look great as a splash image.

In the end, you should have a ZIP archive with quite a few images in it.

Including the Generated Images in the NativeScript Project

Assuming you've created a NativeScript project, you'll find an app/App_Resources directory that contains a child directory for every platform that you've added to your project.

Look at the contents of the generated ZIP archive. The images and directories should match up on a per platform basis. For example, in the generated list of images, you'll have a drawable-ldpi, drawable-mdpi, and drawable-hdpi directory, along with several others. These should match what you'll find within your project. When copying them over, make sure you merge the directories to avoid overwriting any project files that you had previously added.

If you're currently live-syncing the application with Android or iOS, you must stop it and do a clean build. The live-sync CLI will not correctly recognize the changes made to the app/App_Resources directory.

tns build ios
tns build android

The above commands should do the trick. Redeploying to a device or simulator should show the results of what we've accomplished with launcher and splash image generation.

Conclusion

You just saw how to automatically generate splash and launcher images for your NativeScript Android and iOS mobile application. By using one of the available generators you save yourself tons of time letting you focus on development and deployment and less about the artsy stuff.

The generated images might be rather large in file size. It is a good idea to compress them before adding them to your project. Applications larger in file size are often less desirable and media size plays a huge part in this.

Comments