Pixels and screen densities: Android and iOS
The design and development of new interfaces and apps requires knowledge about the variety of screens where the design will be displayed. It is not only about devices dimensions, it is also about screen pixel density and configuration. Here is an analysis of some important terms and units that can clarify how to design and develop consistently across different devices in Android and IOS.
General concepts
Pixel
A pixel is not a unit like a meter. It is the minimum subdivision of a digital image. But an image can sometimes be subdivided into more or fewer parts. It is easier to understand it by using a metaphor. Imagine that pixels are lights in the screen and that they can be closer or farther away from each other depending on the device screen quality or characteristics.
Design in pixels?
See what happens if we define dimensions in px. Two screens of the same size could have a different amount of px. For one screen 100px can be a tiny space while in other, where pixels are farther to each other it will be more space. An element will be displayed bigger or smaller depending on it and this is not consistent.
How can I know how pixels are distributed?
We introduce a new term called density of pixels per inch. It is the quantity of pixels in the space defined by an inch. Here is how you can calculate it:
ppi = screen density (pixels per inch)
w = screen width (px)
h = screen height (px)
d = screen diagonal (inch)
ppi=√((w^2+h^2)/d^2)
Here is an analysis of how screen density affects the design of new digital products in Android and iOS.
iOS
IOS categorizes its devices into various screen density groups to manage how the interface is rendered. Each device is classified based on the density that most closely aligns with its actual ppi:
- regular: 163 ppi.
- retina: 326 ppi.
- super retina: 489 ppi.
Take a look at this table showcasing all the iOS devices data.
Points (pt)
To ensure consistent dimensions across devices, IOS uses a standard unit called point (pt). One point is equivalent to the space occupied by 1 pixel on a screen with a density of 163 ppi. The formula for calculating pt is:
pt = px / (ppi / 163)
When dimensions are specified in points, IOS internally manages these measurements enabling users to see the same dimensions of a design independently from screen density. For example, if an element’s height is specified as 2pts, it will occupy 2px on a regular screen and 4px on a retina screen automatically.
The scale factor is the term that relates the number of px equivalent to a pt in each screen density category.
Android
Android classifies its devices into different screen density categories:
- ldpi (low density): ~120 dpi
- mdpi (medium density): ~160 dpi.
- hdpi (high density): ~240 dpi.
- xhdpi (extra-high density): ~320 dpi
- xxhdpi (extra-extra-high density): ~480 dpi
- xxxhdpi (extra-extra-extra-high density): ~640 dpi
The term dpi (dots per inch) is used to refer to the number of dots that would be printed on a paper to build an image. Nowadays, it is used for the same purpose and meaning as ppi(pixels per inch), describing the pixel density on a screen.
You can install Dev Check in your device to get all the data related to your model.
Independent unit of pixels (dp)
Android introduces a new unit: the independent unit of pixels. It has been defined for the same purpose than points, but Android uses other reference than IOS. One dp is equivalent to the space occupied by 1 pixel on a screen with a density of 160 dpi. The formula for calculating dp is:
dp = px / (dpi / 160)
For example, if an element’s height is specified as 2dp, it will occupy 2px on a medium-density screen and 3px on a high-density screen automatically.
In Android the scale factor is the term that relates the number of px equivalent to a dp in each screen density category.
Scalable pixels (sp)
Scalable pixels have the same behavior than independent pixels but are particularly designed for text elements because they can also be influenced by the device’s text configuration. For example, if an user changes its device’s font size to 1.2x, all the texts defined in sp will grow up proportionally.
Bitmaps
At this point, have you considered what would happen when adding a JPEG or PNG image that is given in pixels? The image would be configured for the default density and scaled accordingly for other densities. This process may lead to blurriness or a loss of image quality.
The solution for Android and IOS is that you have to provide bitmaps for all the possible screen densities. In IOS it means 3 different sizes whereas in Android 6 sizes. Design tools such as Figma or Sketch facilitates to export resources using different scale factors to obtain them easily.
Conclusion
Independent density units and points have been defined to simplify the design of new consistent interfaces since there are hundred of different screen densities. Android or iOS manage it differently but following the same logic.
Testing live designs on various real devices is crucial to detect issues. It is also advisable to variate the configuration of the devices to see different situations. If a screen doesn’t reflect the intended design, review problems related to screen density and units.
