Coming in Delphi 12 is very cool feature that will save cross-platform developers a lot of time. But first, a reminder: This blog post is based on a pre-release version of the RAD Studio software and it has been written with specific permission by Embarcadero. No feature is committed until the product GA release.
Windows and Mac desktop apps have a single icon file associated with the compiled executable that shows in a file list; for Windows, it’s an
.ico file, for Mac, it’s an
.icns file); if you support Universal Windows Platform, you’ll have a couple more. Desktop application programmers can add bitmaps and splash screens as they wish but there is no standard and it’s up to the programmer to decide if and how these should be implemented. When you look at the Project Options page for a VCL project or a FireMonkey project that only supports the Windows and Mac platforms, you’ll see there are only one or two files you need to specify:
Mobile apps changed all that and not only require a different bitmap for each device size but they also support both light and dark mode and splash screen images. The number of images you need to create suddenly becomes overwhelming. For example, here’s a list of images needed for an iOS 64-bit app on an iPhone; note that there’s another tab for iPad images (Android projects require nearly as many as the iPhone does):
A new feature built into the IDE in Delphi 12 Yukon is the “Single App Icon Wizard” and is accessed via the Artwork Generator button seen in the screenshots above. Launching this takes you through a few steps, starting with creating an image that will be automatically scaled to all the sizes you need for multiple platforms and device sizes, including both the
.icns files, then specifying a splash screen, and finally saving all the generated files in sub-folders under your project folder. It allows you to put text over solid colors or bitmaps of your choice.
I tried this on a small, open-source cross-platform suite of apps I wrote a few years ago called, DelphiVersions, which can be compiled on different platforms and under different versions of Delphi to show which compiler directives are active. Since this is just a test app for developers, I never took the time to create the plethora of icons and bitmaps needed for all the different permuations of compiled apps, so this was a perfect test case.
When you first click the Artwork Generator button, you start by defining the main icon of the app as shown below:
I chose to set the text to “Vr” (for Versions) and used Embarcadero’s “red orb” image as the background. You can set the font and color of the text, make it bigger or smaller, and set the shape of the generated icon to rectangle, slightly rounded, rounded, circle, squircle (a shape that can’t decide whether it’s a square or a circle), and a teardrop. Here’s an example of the letter “D” on a teardrop-shapped yellow background:
You may also be prompted for the "Android Adaptive Icon" which creates scalable and responsive icons and splash screens specifically for Android devices in the Vector Drawable format. The “image” option on this screen requires an
.SVG file and since I didn’t have one prepared, I opted to use a solid background.
The last step is specifying a splash screen. I opted to use a saved version of the “Vr orb” on a white background for light themes and the same on a black background for dark themes.
It should be noted that when selecting images for icon or splash screen backgrounds, you should select an
.SVG (scaler vector graphic) file instead of a bitmap to allow the generated images to scale up and down much better. In fact, if you don’t, you’ll see the little warning triangle next to the selected file path as can be seen in the screenshots above.
After the splash screens, click the Finish button and it will pause for a second, then tell you all the images have been generated. There will be a folder for each platform with multiple files in each and if you look at the icons for various platforms, you’ll see they’re all set for you:
You can then replace any of these or regenerate them all by simply going through the wizard again.
This is one of my new favorite productivity tools and lessens the burden of preparing cross-platform apps for a wide audience.