Importing Images for App Icons and Launch Screens

You can import PNG images to be used as application icons (icons displayed when an application starts) and launch screens (first screen of an application).

a. Display your mobile project in the Outline Editor. Select Click to open the App Icon Editor from the top right toolbar of the editor.

b. Locate your mobile project in the Package Explorer. Right-click the project node in the Package Explorer, then select Configure App Icons.

The App Icon Editor shows placeholders for your application icons and launch screens, sorted by platform, and thus gives a visual overview about them. It also lists the size required for each individual image.

a. Drag and drop a single image into the dedicated placeholder. Ensure that the image you dropped matches the required image size, as this import approach uses no scaling.

b. Import a single, high-resolution PNG image to let the editor fill all the image placeholders with a scaled-down version of the imported image. For this, select Import a single high-res icon from the top right toolbar of the editor. A wizard opens where you can drag and drop an image from your local file system. After dropping this image, you can preview how the image is scaled down into a variety of sizes at the right pane of the wizard. If you are satisfied with the resulting quality, click Finish. Optionally, you can select if this image should be used for every or for a particular platform.

When saving the editor, Mobile Development copies the imported images into your mobile project and renames them accordingly. Those images are located within the your_project/gen/.assets/graphics directory. Make sure to commit this directory when working with a source code management system.