With the large number of devices available in the world and the numerous different display sizes and resolutions it is generally a good idea to serve images that scale with the device screen.
On Android images inside the various drawable directories are used to serve the image that scales for the device display.
Google provides a great resource to learn more about supporting different pixel densities.
In our NativeScript project, you will have the
App_Resources/Android directory. Everything in here will mirror a standard Android project. Inside the
App_Resources/Android/src/main directory you should have a
res directory which contains many
drawable-... directories. This is where you should place images that have been resized for the different device displays. To read more on this topic you can read the Android documentation for alternative bitmaps.
There are many approaches to resizing your images for the different drawable folders. You could use Android Studio or other third party tools. For this example we will look at a tool specifically built to help NativeScript developers resize their images, images.nativescript.rocks.
Once you select your image and click the
Go button, your images are processed and then a zipped folder should begin downloading. Open the zip and you should see the same directory structure that you see in your NativeScript
App_Resources like the following image:
Now you can take those images in the output and place them in the corresponding directories of your NativeScript
Any time you edit files inside
App_Resources it is a best practice to execute
ns clean which will clean your project build so the next build will be a fresh native build of the application.