Synthetica V3 – High-Resolution/HiDpi support(19:46, 28. Sep. 2017)

As you've learned in this article Synthetica V3 comes along with UI-scaling support for high-resolution displays. To let your application look as sharp as native applications Synthetica V3 also provides high-resolution support. What does this mean in detail?

High-Resolution/HiDpi API with support for multi resolution icons and images

On high resolution displays icons and images appear too small if not being upscaled. Synthetica's HiDpi class also provides some helper methods to let you create scalable icons/images. So your image based icons appear in the correct size because they will be upscaled until the required size is reached. But there's one drawback – quality. Because of the high density display stretched pixels move closer together so the result looks almost the same as on a regular screen. It isn't that bad but in comparison to other applications/icons the difference is noticeable. The solution is to provide multiple image files with different resolutions. Usually it's good enough to provide only one additional doubled sized image. For this HiDpi#createIcon(ClassresourceBase, String... fileNames) can take multiple image files.

HighResolution Screenshot

// Example:
// icon scaling without high-resolution
button.setIcon(HiDpi.createIcon(getClass(), "/resources/myIcon.png"));
// by adding a high resolution icon, multi-resolution support is enabled
button.setIcon(HiDpi.createIcon(getClass(), "/resources/myIcon.png", "/resources/myIcon@2x.png"));

The naming convention for high-resolution images/icons is to append '@2x' for double density (initially introduced by Apple for their Retina displays). Of course it is also possible to specify high-resolution images in the XML-file of a custom theme.

Font (vector) based icon library set

SyntheticaAddons V3 provides a font based icon library set with around 7.000 free icons. These icons are already scalable and because of their vector nature are still sharp in high-resolution mode. Our IconFontBrowser application helps you to find all required icons and generates the code for using within your own application.

IconFontBrowser Tool

IconFontBrowser Screenshot

High-Resolution Themes

As you maybe know most of our themes are based on image files. Synthetica provides high-resolution support by letting you specify additional images for the high-resolution mode within a theme. So if a theme already offers high-resolution images depends on the theme definition. Currently the themes listed below come along with build in high-resolution support.

  • SyntheticaDark (Synthetica V3 only)
  • SyntheticaPlain
  • SyntheticaSimple2D (Java2D based)
Product Links
Synthetica V3 - UI-Scaling support
Synthetica/SyntheticaAddons V3
Synthetica Look And Feel
Synthetica Download
SyntheticaAddons Download
SyntheticaAddons Demos