Adding Graphical Assets

Customizing a Library Icon

Creating a Scalable Vector Graphic

Importing Icons

Importing Images for App Icons and Launch Screens

Using Graphical Assets

Mobile applications often use a large number of icons to customize and emphasize the user interface. Icons have to be provided in different sizes in order to support multiple screen resolutions. With Mobile Development, you do not need to take care of different icon sizes for every screen resolution: You only need to define one asset file. The asset defines how an icon looks like, and Mobile Development creates different sizes based from this asset definition.

Mobile Development also supports a graphical way to configure your app icons (the icon displayed when an application starts) and launch screens (the first screen displayed). For more information, see Importing Images for App Icons and Launch Screens.

To create and define a new asset

1. Locate your mobile project in the Package Explorer. Right-click the project node in the Package Explorer, then select Mobile > Create new Asset > Mobile Tools > Create Asset.

After the new asset was created, the Asset Editor is opened, and you can start to define your asset. The Asset Editor allows you to define an asset in three different ways. You can either:

Select and customize a library icon. For more information, see Customizing a Library Icon.

Define an asset based on a Scalable Vector Graphic (SVG). For more information, see Creating a Scalable Vector Graphic.

Create an asset set by importing single PNG icons. For more information, see Importing Icons.

2. To save the asset, specify a unique, lowercase file name. After saving, the asset file can be located in the your_project/model/resources directory.

3. To open an existing asset, locate the asset file you want to open.

4. Open the Asset Editor by double-clicking the asset file, or right-click the asset file, select Open > Open With, and select Asset Editor.