The NativeScript Image Builder helps you re-size your Android and iOS image assets for using with your NativeScript apps. Upload your maximum resolution image in PNG format, and you'll get back a .ZIP file with the image assets re-sized.
To get started, specify your image type, select your image, and press Upload!.
Be sure to upload your highest resolution static image (xxxhpdi or @3x).
Select your app icon file, and press Upload!.
For app icons, upload a square image with minimum dimensions of 1024 x 1024.
Android apps should provide 6 image sizes: ldpi (0.75x), mdpi (1.0x), hdpi (1.5x), xhdpi (2.0x), xxhdpi (3.0x), and xxxhdpi (4.0x).
iOS apps should provide 3 image sizes: @1x (iPad 2 and iPad mini), @2x (iPhone 4s, iPhone 5, iPhone 6, iPad [retina]), and @3x (iPhone 6 Plus).
App icons can be even move confusing: Android apps should provide 6 icon sizes, ranging from 36 x 36 pixels to 192 x 192 pixels, plus a Google Play Store app icon of 512 x 512 pixels. iOS apps must include 12 app icons, with varying sizes and pixel densities from 29 x 29 @1x to 60 x 60 @3x (180 pixels), plus several random sizes like the 83.5 x 83.5 @2x to support the iPad Pro.
Upload your image at the highest resolution (xxxhpdi or @3x), and we'll down-size and rename accordingly.
Many developers don't have the time or patience to resize images for their mobile apps, let alone create 8 different versions of an image for a cross-platform app for Android and iOS. Why not out-source it?
Upload a high-dpi version of your static app .PNG images (xxhdpi for Android and @3x for iOS), and we do the heavy lifting. You'll receive a .ZIP file containing the images down-sampled to the right dimensions for each of the 8 platforms. We'll also name them correctly for you. Just because we're nice.
When developing Android apps, you should provide 6 different image sizes: ldpi (0.75x), mdpi (1.0x), hdpi (1.5x), xhdpi (2.0x), xxhdpi (3.0x), and xxxhdpi (4.0x). Mdpi images are typically referred to as the "baseline" image, and the other image sizes should be based off of this image's intent; however, up-sampling from mdpi to xxxhdpi (which is 4x the size) isn't practical and can lead to pixelated images. So, we ask you to upload your xxxhdpi (4x) image, and we'll down-sample the image to the other sizes.
In the .ZIP file we'll send back, we'll create a directory for each down-sampled image, ready to be copied into your App_Resources\Android folder. Folders are named accordingly: drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdi, drawable-xxxhdpi.
For more details on Android-specific images, check out this article on the Android developer center.
iOS apps require you to to provide 3 sizes of images: @1x (iPad 2 and iPad mini), @2x (iPhone 4s, iPhone 5, iPhone 6, iPad [retina]), and @3x (iPhone 6 Plus). @1x images are typically considered the baseline image size, with @2x and @3x being twice and three times the size, respectively. We won't up-sample from @1x, so you'll have to provide the @3x image, and we'll down-sample for you.
Your .ZIP file will include the three images, ready to be copied into the App_Resources\iOS folder of your NativeScript app. The files will also be named according to their size.
To find out more on iOS images and the requirements of the iOS platform, check out the Apple Developer Center.
Creating the "right" app icons (and in the "right" sizes) can be challenging for new developers. There are many great resources online outlining what you need for both Android and iOS platforms.
For Android app icons, we'll create the 6 different required icon, named icon.png, and place them into their respective drawable folders. We will also create the Google Play Store icon, which is a 512 x 512 pixel icon. This will be placed in the root of the ZIP file Android folder and named playstore-icon.png.
iOS app icons are even more challenging to understand. Apple's Developer Center outlines exactly what you need, but we still find it hard to understand. We'll do the heavy lifting and create the various icons, with the proper names, with the standard icon-{pixels}@?x.png format, and supply an updated Contents.json file. We'll also create the iTunes store icons, named iTunesArtwork.png and iTunesArtwork@2x.png, which are 512 x 512 and 1024 x 1024 pixel images.
Yeah. Down-sampling can lead to loss of quality in an image. If this is a concern, this is not the tool for you. You should manually adjust your images, adding and removing detail as you see fit for each of the platforms and image sizes.
So, there's also app icons, splash screen images, and a load of other images required by each platform. Support for those is coming.
NativeScript is an open-source library for building professional cross-platform mobile apps for Android and iOS using JavaScript.
For a more complete reference for using images within your NativeScript app, check out the NativeScript docs.
Check out some of the community support around NativeScript app icons and images.