This guide was originally published on Material.io.
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 8.
Screen diagonal: 6.2"
Screen dimensions: ~
Aspect ratio: 20:9
Pixel resolution: 1080x2400
dp resolution: ~
Density bucket: ~
The screen diagonal, aspect ratio, and pixel resolution can all be found on the Pixel 8 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 = 6.2 / √((20/9)²+1)
Width = 2.54”
And now that we know Width, we can solve for Height.
Height = (20/9)×2.54
Height = 5.6”
So our screen dimensions are 2.54×5.6”
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×2400px, and its physical dimensions are 2.54×5.7” so we can plug those values into the formula, starting again with width.
1080 = dp×(428/160)
1080 = dp×2.675
dp = 1080/2.675
dp = 404
Next we’ll do the same calculation for the screen’s height in density-independent pixels.
2400 = dp×2.675
dp = 2400/2.675
dp = 897
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. Of course it’s better to use vector assets where you can for things like icons and simple shapes, but 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 8’s ~428ppi, we would assign the XXHDPI density qualifier.
Putting it all together 🧩
Having worked through those calculations, we now have a complete set of device metrics for our example device, the Pixel 8.
Screen diagonal: 6.2"
Screen dimensions: 2.54×5.6”
Aspect ratio: 20:9
Pixel resolution: 1080x2400
dp resolution: 404x897
Density bucket: XXHDPI
In a few cases, I’ve heard from folks that their measurements come out a bit mismatched from official measurements at other sources. One reason I’ve found for this is that manufacturers could set the display’s default density to a different value than its physical pixel density. So far, I haven’t found a way to reliably tell if this has happened, but if things feel off, that may be why. Testing against an actual device, when possible, will help expose these discrepancies.
