How to verify (digital) pixel-perfect development in Android?

Question

tl;dr How do I convert pixel measurements on one device to pixel measurements on another?

I've designed an Android app with all the screens measuring 720x1280 px. I've assumed this is at 2.0 xhdpi meaning digital-pixel dimensions of 360x640 dp.

Now in QA I've found a few inconsistencies on my Nexus 5x, taken screenshots, and pulled them into Photoshop to confirm/measure the errors. The Nexus 5x is 1080x1920 px, but is at 2.6 xxhdpi which converts to 411x731 dp.

Won't just a simple scale fail?

It's not as simple as pulling the Nexus (1080 width) screenshots into Photoshop and scaling them to width 720, right? That doesn't account for pixel densities.

Said another way. If a square is 100px (50dp) on my @2x design, how large should I expect it to be on the Nexus screenshot?

Helpful links

• Android Docs, especially the part about Supporting Multiple Screens
• Google's Device Metrics

Answer 1

There are multiple questions/thoughts in your post.

To start:

How do I convert pixel measurements on one device to pixel measurements on another?

And:

I've designed an Android app with all the screens measuring 720x1280 px.

I'm going to assume you mean that you made some digital images/ux documents at 720x1280 and now are building out the code/loading images for your app and have run into problems because different devices are behaving in an unexpected way? Correct me if this is inaccurate.

Designing for Android, and mobile in general, is at least to some extent about asking yourself what you want the user to experience, and how to accomplish that within the framework's rules for building an interface.

Google states that when dealing with multiple devices you should aim for "density independence":

Your application achieves "density independence" when it preserves the physical size (from the user's point of view) of user interface elements when displayed on screens with different densities.

The image below represents "bad" design (doesn't take into account dp)

The image below represents good "density independent" design:

http://developer.android.com/guide/practices/screens_support.html#density-independence

In other words, if taking into account density independence when designing and building your app, the user should see images and/or views in a consistent way across devices. Verifying images and views on different devices should not be done in Photoshop or similar, it should be accomplished in the emulator provided in Android Studio and/or on multiple physical devices with various OS versions and/or screen sizes (as they are available to you).

Another thing to keep in mind:

You asked:

Said another way. If a square is 100px (50dp) on my @2x design, how large should I expect it to be on the Nexus screenshot?

Go to the Google Device Metrics page:

Click on Nexus 5x, and look at the device info from the slide-in panel:

According to this info, the Google Nexus 5x is 424px/in i.e. 424dpi

Use the equation px = 50dp * (dpi / 160)

px = 132.5

It is valuable to also give a real-life example of how to calculate pixel and dp sizes when using a specific device, and hope that this helps you get to the next step and answer the question above in the future.

Let’s say we have some images we want to fit "perfectly" across a device when the device is in portrait orientation. Like this:

And let's say our device is the Nexus 5. As you can see in the above example, there are 7 identical images side by side, from the left to the right side of the screen. With the following example, you should probably be able to figure out "how large [you] should expect [images] to be" for various circumstances:

1. We know the Nexus 5 is an xxhdpi device because we looked it up in Google’s Device Metrics:

2. Let’s start doing the math by accounting for padding. I assume you have padding by default - check it out in your values/dimens.xml to make sure:

That’s 32dp we need to account for.

3. Next, we know the width of the Nexus 5 is 360dp or 1080px, so let’s figure out the width of one of our seven images:

Let’s make the decision that we’re going to import our image with Input Density of xxdpi in mind.

360dp (full) - 32dp (padding) = 328dp (remaining for 7 images)

328dp / 7 = 46.9dp (approx)

Let’s go to androidpixels, highly recommended site for conversions, and look up what that means in pixels - in this case, it equals 140.7px.

4. Create a png version of our image that’s 140.7px and import it as xxhdpi (we'll import it in the same dp signature as the device).

Since Adobe Illustrator and Adobe Photoshop won’t allow decimal sizes, you can go with 140, and make up the difference with spacing in Android Studio. The math suggests that if there are 6 gaps between these 7 images, and we lost 0.7px per image, that’s 6 * 0.7px = 4.2px which we may have to account for somewhere.

5. After you import the images in Final Android Resizer, highly recommended for resizing images - or just import it into the proper drawable folder - there’s one final step: update the content_main.xml with the correct image, and make sure to do it for all seven ImageView elements:

This is what it should finally look like:

Do these steps again with the size of the device in question.

This is also not the only way to do this. You can use layout directories to pinpoint specific device dimensions and affect views within them. See another post I made about this:

Differences between scaling images with dpi as opposed to dp