How to Find Device Metrics for Any Screen
New devices are always coming online, offering new formats, screen sizes, and pixel densities that youâll want your product to accommodate. If Googling doesnât give you the numbers you need, or you just want to show off your math skills, hereâs a relatively easy way to determine the relevant metrics for your designs.
Do it yourself đ
There are six pieces of information youâll want in the end: the screen diagonal measurement, screen dimensions, aspect ratio, pixel resolution, dp (or density-independent pixel, Androidâs logical pixel) and the density bucket to which each device belongs. Some of those specifications can be found on each deviceâs product page, or through other sites that collect information about specific devices.
Itâs easiest to visualize this information if we have an example. So, to get a feel for the process of finding these values, letâs start with the Pixel 4.
Screen Diagonal | Screen Dimensions | Aspect Ratio | Pixel Resolution | dp Resolution | Density Bucket |
---|---|---|---|---|---|
5.7" |
~ |
19:9 |
1080Ă2280 |
~ |
~ |
The screen diagonal, aspect ratio, and pixel resolution can all be found on the Pixel 4 product page. For devices that donât have in-depth or easily accessible specification pages, sites like the GSMArena Phone Finder can be a good resource.
Finding Screen Dimensions đ
After filling in the readily available info, we have three more specs to solve for. The first one is the screenâs dimensions in terms of width and height. The formulas for this â which I learned from an Omni Calculator page by Hanna Pamula â are fairly easy to use, and only require a diagonal measurement and an aspect ratio (AR).
Width = diagonal / â(ARÂČ+1)
Height = (AR)ĂWidth
So for our example, we know the screen diagonal is 5.7 and the aspect ratio is 19:9 (which weâll write as 19/9 in the formula).
Width = 5.7 / â((19/9)ÂČ+1)
Width = 2.44â
And now that we know Width, we can solve for Height.
Height = (19/9)Ă2.44
Height = 5.15â
So our screen dimensions are 2.44Ă5.15â
Finding dp Resolution đ
Density-independent pixels are Androidâs logical pixel. Measuring in dp allows designers and developers to ensure that what they create appears at the same physical size across screens, no matter what density those screens happen to be. So knowing the dp resolution of a device can be really helpful in targeting that device with your design. You can easily set up artboards and assets that focus on specific form factors, and reliably reproduce your design across them.
For this formula (which you can find in the Android Developers documentation on pixel density), we need to know the screenâs pixel resolution, the dimensions we calculated before, and the screenâs ppi. The screenâs dpi (written as ppi) should be available at one of the sources mentioned above.
px = dpĂ(dpi/160)
In our example, we know the screenâs pixel resolution is 1080Ă2280px, and its physical dimensions are 2.44Ă5.15â so we can plug those values into the formula, starting again with width.
1080 = dpĂ(444/160)
1080 = dpĂ2.775
dp = 1080/2.775
dp = 389
Next weâll do the same calculation for the screenâs height in density-independent pixels.
2280 = dpĂ2.775
dp = 2280/2.775
dp = 822
Finding the density bucket đ
The Android Developers documentation on pixel density also outlines the notion of âdensity qualifiers,â which Android uses to serve bitmap drawable resources in an app. If there are non-vector assets like photos or illustrations in your design, it can be useful to know which density buckets youâre targeting, serving the right asset to each device to speed up loading and to avoid distortion and âout of memoryâ errors.
Finding the density bucket is as easy as looking at the table in the documentation linked above and comparing it to our dpi value. For the Pixel 4âs ~444ppi, we would assign the XXHDPI density qualifier.
Density Qualifier | Denisty Value | Scale | Description |
---|---|---|---|
ldpi |
~120dpi |
0.75x |
Resources for low-density (ldpi) screens. |
mdpi |
~160dpi |
1x |
Resources for medium-density (mdpi) screens. (This is the baseline density.) |
hdpi |
~240dpi |
1.5x |
Resources for high-density (hdpi) screens. |
xhdpi |
~320dpi |
2x |
Resources for extra-high-density (xhdpi) screens. |
xxhdpi |
~480dpi |
3x |
Resources for extra-extra-high-density (xxhdpi) screens. |
xxxhdpi |
~640dpi |
4x |
Resources for extra-extra-extra-high-density (xxxhdpi) uses. |
nodpi |
n/a |
n/a |
Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density. |
tvdpi |
~213dpi |
1.33x |
Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't need itâproviding mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi. |
Putting it all together đ§©
Having worked through those calculations, we now have a complete set of device metrics for our example device, the Pixel 4.
Screen Diagonal | Screen Dimensions | Aspect Ratio | Pixel Resolution | dp Resolution | Density Bucket |
---|---|---|---|---|---|
5.7" |
2.44Ă5.15 |
19:9 |
1080Ă2280 |
392Ă822dp |
XXHDPI |
For further reading on pixel density, layout, and how the two interact, see the Material Design guidance on Layout.