I looked it up in the Android documentation (I'm not an Android developer) and as I suspected, DP means Device-independent Pixel. That answers your question…
@hen5FD8 wrote:
What the hell does DP even mean if it doesn't represents any kind of visual size difference?
…because DP does represent a visual size difference. But not an absolute difference — DP is, conveniently, a value that stays constant regardless of hardware ppi or viewing distance. According to the Android documentation (I added the bold formatting)…
…you must design your UI using density-independent pixels (dp) as your unit of measurement. One dp is a virtual pixel unit that's roughly equal to one pixel on a medium-density screen (160dpi; the "baseline" density). Android translates this value to the appropriate number of real pixels for each other density.
As a virtual pixel, it does not correspond to a specific physical pixels per inch value in hardware. It can’t, because it doesn’t yet know what hardware it will need to resolve to, so instead, as a device-independent pixel, it corresponds to a size unit that is consistent regardless of the ppi of the display. It’s related to the concept of the CSS reference pixel: Instead of being a single physical ppi value that can’t possibly be a consistent size across different displays, it represents a constant angle of view. By defining a device-independent pixel as an angle of view, that value can always be a constant apparent real-world size, while resolving to different hardware ppi values depending on the specific panel. Being defined as an angle of view also lets a DP automatically compensate for different viewing distances, since apparent pixel density increases for screens held closer like phones. So one DP might resolve to 160 ppi on a certain phone, and also resolve to 96 ppi on a desktop display 3 feet away.
@hen5FD8 wrote:
Here's the odd part. I made a 48px button in photoshop at 72DPI, and it looked exactly the same as a 48px button made at 160DPI. The size were the same. The density might be different, but the size remained the same. The button sizes looked exactly the same in the Android Emulator.
You have a document ppi (72 ppi and 160 ppi), and you have document pixel dimensions (48 px). But what magnification did you use to compare the two ppi values in Photoshop? If they were both viewed at 100% magnification in Photoshop, then nothing is wrong: If they are exactly the same apparent size, that is what to expect, because 100% means one image pixel to one display pixel. Both documents are 48 px, both should appear the same size at 100% magnification, because both are the same pixel dimensions. In other words, if you view both at Photoshop 100% magnification, you are not previewing the difference in density.
If you want to see their sizes at a simulated 72 ppi and 160 ppi in Photoshop, you must work out what magnification will simulate that at the ppi resolution of your display, because it won’t be 100% (unless your display is exactly 72 ppi or 160 ppi). View > Actual Size won’t do it either, because that only works for documents measured in inches, not pixels. That means you need to correct the magnification percentage to account for your target ppi (e.g. 160 ppi) corrected for your display ppi (the hardware pixels divided by inches, of the display you’re editing on).
If you are using a HiDPI (Windows) or Retina (macOS) display, you must also correct for the scaling factor. The scaling factor accounts for old displays being around 90-120 ppi (1x scaling factor), newer displays being 150+ ppi (2x scaling factor), and closely viewed HiDPI smartphones being 300+ ppi (3x scaling factor).
I think this might be the way to work out those calculations with Photoshop:
- In Photoshop Preferences, go to the Units & Rulers panel, and look at the New Document Preset Resolutions options.
- For Print Resolution, enter your target resolution, which is 160 if you’re targeting DP and not a specific device panel. (It says Print but it really means “final output.”)
- For Screen Resolution, enter the actual hardware resolution of your display panel multiplied by its scale factor. If you don't know what it is, divide your display panel’s width in pixels by its width in inches. If it isn’t a HiDPI/Retina display, the scale factor is 1x (no correction). If it is HiDPI/Retina, the scale factor is 2x so double the ppi and enter that.
When you want to preview the target DP resolution:
- In Photoshop, choose Image > Image Size, disable Resample, and set the Resolution ppi field to 160.
- Choose View > Print Size. The image should display at 160 ppi on your specific display if Units & Rulers was set up right. The apparent size on other devices may still vary because they will have different hardware ppi.
I don’t know how to do this in Android Emulator. But you should look to see if it has a way to preview the real world size of a 48 x 48 px @160 DP asset at different device resolutions/scale factors.
If this is all too confusing, you’ll want to study Device-independent Pixels (DP) and HiDPI scale factors, and how they are different than and compensate for the ppi of specific display panel hardware.
6
Replies
AdChoices