Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
DelphiNewsRAD Studio

[Yukon Beta Blog] Multi Device Icon Generator

multi device icon generator

This content is based on a pre-release version of the software and has been written with specific permission by Embarcadero. No feature is committed until the product GA release

You kick off a new project. You are excited! You are coding all the features thinking:

“How cool this will be for our customers!” 

Everything is ready. You know that a neat look is important. Otherwise, your work will look sloppy. One of those details that matter are icons. They are the face of your app in your cellphone library or your computer’s desktop. 

Thinking about that neat look, we introduced a new feature that generates icons for all screen’s resolutions automatically within the IDE. Here is a glimpse of how that feature works.

First, we need to create a multi-device application. For this example, we went with a blank application.

To start this new tool, open the project options (ctrl+shift+F11), go to the Application -> Icons menu, and you should see a “Artwork Generator” button, like show in the images bellow:

icons generator menu

From here, you have several options. You either can change or create icons for a specific platform, or create all at once. In this example, we will create for all platforms by choosing the option “All Configurations” on the dropdown menu and clicking the “Artwork Generator” button.

mobile icons generator all configurations

You’ll be presented with the option of using a PNG or text as a base for your icons, along with a large number of other options. In this case, we chose PNG, adjusted the size to fit the standard icon and pressed next.

mobile icon generator menu

On the second page, we are presented with the configuration for the Android Adaptative Icon. Since for creating one, we need a SVG, for now, we opted for creating a text based icon. However, later in time, we can come back to this wizard and generate the icon for the Android platform alone.

mobile icon generator android adaptative icon

The last option for us to configure is splash screens. Here we can configure for dark and light themes. In our case, they will be the same since our application already has a dark background by default. With our icon as base, we can adjust the background and size of the image. The final result can be seen in the following images.

splash screen multi device icon 2

By pressing “Finish”, all the artwork should be generated. In case of any formatting issues, it is possible to reconfigure the images for any specific platform without affecting the others. For that, just revisit the menu and instead of “All configurations” choose the specific platform you want and run the Artwork Generator again. For example, bellow you can see the icons generated for iOS.

mobile icon generator iOS

Keep in mind that the generated images are saved in a sub-folder of the project folder with the project name. Therefore, if you rename the project, you must manually rename the subfolder accordingly.

An additional consideration for icons: 

  • Adaptive Icons: According to the Android documentation, we shouldn’t clip or use icon format masks, as Android itself must configure the icon according to its theme to standardize the OS icon format. Therefore, the shape value is ignored for Android adaptive icons. 

 

This content is based on a pre-release version of the software and has been written with specific permission by Embarcadero. No feature is committed until the product GA release.

The beta version of the next release of RAD Studio is available to all active subscription customers. Contact your sales rep if you haven’t received an invite. If you don’t have an active subscription, you can buy an 11.3 license today and get enrolled in the beta


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

5 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES