This property allows us to use different images depending on the density of the device screen.
For example, Smart Devices applications, especially for Android, are executed on a great number of different devices from different makers and characteristics, with different screen sizes (in cm), resolution (pixels) and densities (the number of pixels per physical unit of length, expressed in dpi).
| |
Android |
iOS |
Windows |
Web |
|
| Unknown |
- |
- |
- |
|
Equal to hdpi for Android and mdpi (1x) for iOS. For compatibility with previous versions of GeneXus (do not use for new images since densities are inconsistent among platforms). |
| 75% |
ldpi |
- |
- |
.75x |
Low density (~120dpi) |
| 100% |
mdpi |
1x |
1x |
1x |
Medium-density (~160dpi). Baseline. (Non retina images for iOS) |
| 125% |
|
|
|
1.25x |
|
| 140% |
- |
- |
1.4x |
- |
Windows 140% |
| 150% |
hdpi |
- |
- |
1.5x |
High-density screens (~240dpi) |
| 200% |
xhdpi |
2x |
- |
2.x |
Extra high-density screens (~320dpi). (2x Retina images for iOS) |
| 240% |
- |
- |
2.4x |
- |
Windows 240% |
| 300% |
xxhdpi |
3x |
- |
3.x |
Extra-extra-high-density screens (~480dpi) (3x Retina images for iOS) |
| 400% |
xxxhdpi |
- |
- |
4.x |
Extra-extra-extra-high-density screens (~640dpi) |
Android note: While including all density variants is not mandatory, it's highy recommended to do so. If a particular density is not available for an image, then the closest one will be automatically scaled. This may, however, produce visual artifacts. To create alternative bitmaps for different densities, you should follow the 3:4:6:8:12 scaling ratio. For example, if you have a bitmap drawable that's 48x48 pixels for medium-density screen (the size for a launcher icon), all the different sizes should be:
- 36x36 for low-density (LDPI)
- 48x48 for medium-density (MDPI)
- 72x72 for high-density (HDPI)
- 96x96 for extra high-density (XHDPI)
- 144x144 for extra extra high-density (XXHDPI)
Check HowTo: Use different images depending on the theme, language and density of the screen to know how to use this property.
See Also
How to use responsive images in a web application