PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Implementation
  • How to proceed?
  • Notes
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
On mobile, when displaying images, each device has its own physical size and its own graphic resolution.
Let's take a look at the terms linked to the management of screens and images:
  • the size of a screen is expressed in pixels. The size of a screen corresponds to width and height of a screen in number of pixels.
  • the graphic resolution of a screen is expressed in "dpi" (dots per inch) or in "ppi" (pixels per inch). It is the number of dots displayed per inch or the number of pixels per inch (an inch is equal to 2.54 cm). The higher this value is, the more precise the display will be.
The same image file, on 2 screens with the same physical size but with a different resolution, may be displayed in a different size.
To avoid this, and to display the image with an identical size, the images are displayed in "stretched" mode.
  • For the high-definition screens, the displayed image may be pixelated.
  • The opposite will happen for the low-resolution screens: if the image is a high-definition image, its reduction may provoke a blur effect.
center alt=
To solve this problem, WINDEV Mobile proposes, for each image used in the application, to provide several image files, adapted to different DPI.
At run time, the image adapted to the resolution will be automatically selected.
Versions 21 and later
WINDEVWINDEV MobileUniversal Windows 10 App This feature is now available in Universal Windows 10 App mode.
New in version 21
WINDEVWINDEV MobileUniversal Windows 10 App This feature is now available in Universal Windows 10 App mode.
WINDEVWINDEV MobileUniversal Windows 10 App This feature is now available in Universal Windows 10 App mode.
Implementation

How to proceed?

To automatically manage the DPI of an image used in the application:
  1. Create a set of images corresponding to the different DPI.
    • Android 5 DPI are supported: 160, 240, 320, 480, 640.
    • iPhone/iPad 3 DPI are supported: 160, 320, 480.
  2. The name of these images must be formatted as follows:
    ImageName@dpi999.Extension

    For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi160.png",
    • "Logo@dpi320.png",
    • "Logo@dpi480.png".
    The name of these images must be formatted as follows:
    ImageName@dpi99x.Extension

    Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
    The editor operates in 160 DPI. For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi1x.png" for the 160 DPI. In Android, corresponds to mdpi.
    • "Logo@dpi1_5x.png" for the 240 DPI. In Android, corresponds to hdpi.
    • "Logo@dpi2x.png" for the 320 DPI. In Android, corresponds to xhdpi.
    • "Logo@dpi3x.png" for the 480 DPI. In Android, corresponds to xxhdpi.
    • "Logo@dpi4x.png" for the 640 DPI. In Android, corresponds to xxxhdpi.
  3. In the editor, in the control corresponding to the image file, select one of the files found in the set of images.
When creating the Android or iOS archive, WINDEV Mobile will automatically include all the images supplied in the archive.

Notes

  • There is no need to provide an image for the 5 supported DPI. At run time, the best suitable image regarding the DPI of the device screen will be automatically displayed.
  • Pay special attention to the image formats supported by the platform used.
  • For some images (splash screen, application icon, ...), the interface of the editor also proposes to select a file per resolution. In this case, the two methods can be used (selecting a file per resolution or selecting a single file in multi-dpi format).
  • The image catalog automatically generates the necessary images. See Image catalog for more details.
Minimum required version
  • Version 20
This page is also available for…
Comments
Click [Add] to post a comment