: What is Dpi and how to use it in android app design I just took a project on android app design. I am beginning to learn about app design and this dpi stuff is really throwing me overboard.

@XinRu324

If anyone else is stuck where I am... I found a work around. Heres what I did
to bypass calculating pixels.

1) Make a new file in photoshop with your device's dimensions. for mine its 1080x1920 for nexus5.

3) Visit this link:

Vote Up Vote Down

@Angie364

For the purpose of understanding what they are, PPI and DPI are exactly the same, dots or pixels per inch. PPI is the digital version of DPI.

What you need to understand is that a dot or a pixel has no physical size. It can be 0.0000001mm2 or 1m2. When you get too close to a large outdoor digital advertising board you can actually see the pixels and they're pretty big.

If a file is 72 DPI/PPI, that means there are 72 dots or pixels squeezed into every inch. The more dots/pixels per inch, the higher the quality of the image will be.

Now, if I recall correctly, my Nexus 5 has a screen of 442 PPI. That means that they've fitted 442 pixels into each inch. When you look at a 442 PPI image on a standard 72-96 PPI laptop screen at 100% zoom it is going to be nearly 5 times bigger than a standard resolution 96 PPI image because it has nearly 5 times as many pixels.

So the bottom line is, for higher quality screens, you need higher quality (larger) graphics.

Vote Up Vote Down

@Shelley591

You ask quite a few questions all at once here—far too many for all of them to be answerable in one answer. I’ll limit myself here to explaining what I think is the basic source of your confusion: the different units of measurements.

 

DPI, PPI, and DP

DPI is dots per inch (this can be easily looked up—it’s even in most dictionaries), which is a measurement used to define the density of scanners, printers, and other ‘real-world’ things. For screens, the traditional unit is PPI, pixels per inch (though some, like the Android documentation page linked to below, somewhat misleadingly use DPI for screens as well).

DP is density-independent pixels, a unit created to account for the varying density (in PPI) of different types of screens.

‘Density’, as the DPI and PPI names suggest, refers to how many pixels a given type of screen contains in the physical space of one inch, i.e., the physical size of each individual pixel.

 

A practical example

If you have a screen that has a physical size of 5” x 5” (let’s just assume it’s rectangular for ease of calculation) and a density of 96ppi (common enough in older mobile screens), the entire screen consists of (5 x 96) x (5 x 96) px = 480 x 480 px = 230,400 pixels. If you make a box 480 pixels wide and 120 pixels tall, it will fill the entire width of the screen and one fourth of its height.

If you have a newer screen of the same physical size, but with smaller pixels at 326 ppi, that number changes drastically: (5 x 326) x (5 x 326) px = 1980 x 1980 px = 7,762,392,000 pixels. That’s about 33,690 times as many pixels in the same physical space. Obviously, if you view the same 480 x 120 px box as before on this screen, it will take up less than one fourth of the width of the screen, and only about one sixteenth of the height: it will be tiny.

Density-independent pixels are a way to work around this, at least in part. They are based on a specific density of 160 ppi, ignoring what the actual density of the screen is. Let’s use the same box on the same two screens again, but this time define it in dp instead of px. To calculate how big the box will actually appear on the screens, we now need to find the ratio between the imaginary base screen (160 ppi) and the physical screen: the small one at 96 ppi has a ratio of 160/96 ≈ 1.67 (1 ²⁄₃), while the large one at 326 ppi has a ratio of 160/326 ≈ 0.5. The size the box will appear on the screens is its size in dp divided by this ratio:


Old screen: (480 / 1.67) x (120 / 1.67) ≈ 287 x 72 px
New screen: (480 / 0.50) x (120 / 0.50) ≈ 960 x 240 px


If we take these sizes as being relative to the size of the whole screen, we can see how they’re now much closer to each other:


Old screen: (287 / 480) x (72 / 480) ≈ 59% x 15%
New screen: (960 / 1980) x (240 / 1980) ≈ 48% x 12.5%


So where defining the size of the box in absolute px made it 100% x 25% on one screen and 25% x 6% on the other screen (a huge difference), defining it in dp instead makes them fairly close to appearing to be the same size on both screens.

Much the same could be accomplished by defining it in per cent, but as you probably now from ‘regular’ web design, percentages have their own problems and caveats; density-independent pixels are a way to get a more uniform appearance out of an absolute unit of measurement.

 

Typography and SP

When dealing with typography, you should use the SP unit (scale-independent pixels) instead of DP. SP work the same way as DP, but they also take into account the user’s text-size preferences. So if a user has set the basic preferences on his phone to always use larger text (say, 120% of normal size), text set in 12sp will be 12dp x 120% = 14.4 dp; i.e.:


Old screen: (14.4 / 1.67) ≈ 8.62 px (1 line ≈ 1.77% of screen height)
New screen: (14.4 / 0.50) = 28.8 px (1 line ≈ 1.45% of screen height)

Vote Up Vote Down