Convert PX to DP

Question

First of all, I'm a mobile developer and I'm risking the development of a layout for my app, right from the start I found the following problem, Photoshop uses PX as a unit of measure for the forms and in development the app uses DP, I know how the conversion works From PX to PD

dp = px * (160 / dpi)

However when I apply a formula and use the values ​​in the programming the layout breaks, I would like to know if there is a PSD file configuration, such as height, width, pixel density where I can use as the basis to mockup my app so Make it easy to carry these measures for mobile and tablets ?

Answer 1

Photoshop uses PX as a unit of measure for the forms and in development the app uses DP, I know how the conversion works From PX to DP

The conversion will depend on how the original design in Photoshop was constructed. Android’s dp units are density independent pixels. 1dp might render as 1 screen pixel, or 2, or 3, or 4, or some other value, depending on the device and Android settings.

Here’s a list of the common conversions:

• 1 dp = 1 pixel, or 1×, for mdpi displays (~160PPI).
• 1 dp = 1.5 pixels, or 1.5×, for hdpi displays (~240PPI).
• 1 dp = 2 pixels, or 2×, for xhdpi displays (~320PPI).
• 1 dp = 3 pixels, or 3×, for xxhdpi displays (~480PPI).
• 1 dp = 4 pixels, or 4×, for xxxhdpi displays (~640PPI).

So, the big question is which density do you want to build your mockups in? You can choose any of the above densities. Your choice will dictate the conversion, and other factors.

My preference is to design at 1×, a scale where 1 dp = 1 px = 1 CSS px = 1 iOS point. That will mean your mockups are lower resolution than the device itself, but it means the conversion requires no change to the value.

When you’re done, Photoshop has a few ways to export assets for the various densities. Export As and Generator can build the other scales, or you can use Save for Web and slices (like I do).

Here’s Photoshop’s Export As window, with the exporting set up for 1×, 2× and 3× densities (for iOS, in this case).

Answer 2

Your formula is incorrect. As a reference, Android Development Guide says,

px = dp * (dpi / 160)

so the actual formula for dp is

dp = px / (dpi / 160)

Hope that helps!

For the second part of your question, Photoshop is rather tedious when it comes to exporting assets, or even splices. If you're open to using Sketch, it's so much easier. But sorry, as a mobile designer, I hardly use photoshop because the conversion of px to dp is not an easy thing to do in that program.

Revised

I think I understand your question better now. Please look at this site for the values you're looking for: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Answer 3

This might be off topic here, but I'd recommend to not use Photoshop for screen design at all. Use a vector tool like Illustrator, Sketch or similar. The difference is, that you can scale up your designs later. If you work in Photoshop at a 1x size, your designs will look awful on a modern Andriod phone. You'd have to setup the designs at least at 2x, better 4x to make them look smooth on a high-ppi screen.

Also all assets that you create with a vector tool, can later be used as assets for all required sizes. In Photoshop it will be much more work to isolate buttons, icons etc. for a later export.