DesignBytes: Density-independent Pixels


Hi. My name is Roman Nurik from the
Android team at Google. And in today’s design, I’d like
to talk to you about how screen pixel density affects
your workflow as an Android App Designer. Let’s take a look. So the first thing to understand
is that Android devices come in all
shapes and sizes. And the screens on these
devices have different pixel densities. And this number is measured
in dots per inch, or DPI. And these pixel densities simply
say in a given square, say, inch of space on
the screen, how many pixels will fit in? And this determines very much
the level of crispness that you’re going to see graphics and
text and things like that on that screen. So in this example, here a
couple of different DPI values, possible DPI values and
how text, in this case, the letter a, would be rendered
on those screens. You’ll notice that on the higher
density screens, the letter A is rendered in a much
more crisp, a much more almost correct representation of the
letter A than on the medium density screens on the left. Now as a designer, these pixel
densities like 165, 234 and so on, could be very cumbersome
to work with. So fortunately, Android has
created something called logical pixel densities, or
buckets of densities that the real densities would fall into,
to simplify things. So here on screen, you see a
couple of the key, the most important logical densities that
you as a designer would have to work with. So something like, if a real
device had 165 DPI screen, that would be mapped
down to 160 DPI. And then everything that you
would do from that point on, you wouldn’t have to worry
about the 165 number. You simply think about, oh this
screen I will treat as a 160 DPI screen. And 160 DPI is a
special value. It’s something called the
baseline density in Android, where everything, and
specifically the density independent pixel units we’ll
talk about in a second, where everything is based on this
baseline density. So that’s 160 DPI. At the other far end of the
spectrum currently, the highest number, the highest
logical density is extra extra high DPI, or XXHDPI, which
is 480 dots per inch. And so there are four specific
densities between 160 and 480 that you should really
be aware of. That’s 160, 240, 320, and 480. And there are a couple that
are not listed here. There’s LDPI at 120 and TVDPI
at 213, but those are less common, and you generally
don’t need to worry about those. So now that we understand
density, let’s now talk about something that’s critical to
designing for Android, and that’s the density-independent
pixel unit. Now, density-independent pixel
units, which are sometimes abbreviated as DP, or DIP,
sometimes referred to as DIPs in conversation. They are a virtual pixel unit,
and they’re equivalent to one physical pixel– that’s one physical pixel on the
screen on a MDPI, or 160 DPI screen. And now if you have a single
density independent pixel on a MDPI screen, that’s one
physical pixel. But if you’re on a larger
screen, let’s say an XHDPI screen, it’s actually
four pixels, two across and two down. So why do we use density
independent pixels? Well, the reason for that is
that we want to make sure that when we create layouts, and
overall kind of define the user interface for our
application, we want to make sure that UI elements remain
the same physical size, approximately, across devices
with different densities. We don’t want to have to specify
for each individual density what the sizes of our
UI elements should be. So let’s look at an example. So here we have 200 dips, and
again, dip units or DP units keep things roughly the same
physical size across devices. So we have 200 DP units and we
have, let’s say, this wide purple rectangle
that’s spanning across a couple devices. Now on an MDPI device, like the
tablet you see here, 200 DPs will actually result
in something that is 200 pixels tall. So again, one DP is
one pixel at MDPI. Now on an XHDPI device like this
Nexus 4 here, the 200 DPs will actually become
400 pixels tall. And this is actually
built-in behavior. If you specify that something
should be 200 DP, it’ll be the same physical size on
different devices. Now one interesting thing about
DP units is that since they’re the same physical size
across devices, we can start representing physical objects
in terms of DPs. So for example, the fingertip,
the human fingertip is about 50 DPs wide. Now what that means is that
when you are sizing your buttons and other UI elements,
you want to make sure that things don’t get too small,
small enough to touch. You want to make sure they’re
about the size of a human fingertip so that a regular
person could comfortably press that button without making
too many mistakes. So let’s look at some math
that will help us get comfortable with converting
between pixels and DP units. Now here’s the only real
formula you need. To solve for one of the
variables, you simply plug in the other two. So let’s look at
some examples. So here’s the definition
of DPs. One pixel is one dip or one dip
is one pixel at 160 DPI. Easy enough. Now on a 320 DPI screen, one dip
is actually two pixels– two pixels across and
two pixels down. So let’s actually put this
equation in practice, and look at a quick exercise. So how big is the 2013
Nexus 7 screen in density-independent pixels? Now the information we have is
that we know that the screen is seven inches across
diagonally. We know that it’s an XHDPI
screen, meaning it’s a 320 DPI screen. And we also know that the screen
resolution is 1920 by 1200 pixels. And so the first thing you may
want to ask yourself is, what information here is necessary? Now the fact that it’s a seven
inch screen here is not actually necessary. To calculate the number of
density-independent pixels, we don’t actually need the diagonal
screen size if we have the number of pixels
and the density. So if you look at the formula
from before, you’ll notice that the ratio between XHDPI
and MDPI is two to one. So to convert from pixels to DP
units on an XHDPI device, you simply divide by two. So the answer here is 1920
divided by 2 by 1200 divided by 2, or simply 960 by 600
density-independent pixels. So you may be asking, what’s the
point of this calculation? Well, the reason is that
density-independent pixels better capture device physical
screen size. Pixels could be the same across
devices of different screen sizes. For example, you can have a
medium-density tablet at 1280 by 800 pixels, and an extra
high-density phone at 1280 by 720 pixels. And their screen resolutions in
pixels are almost the same. But that same phone will
actually have a much smaller screen resolution when
looked at in terms of density-independent pixels. And so density-independent
pixels better capture that. So with that, let’s move
on to some quick tips before we sign off. So first, remember to design and
spec all of your layout in terms of arrangement of UI
elements, the sizes of elements, the positions
of elements. Make sure to spec that
all out in DP units. It’s going to make it a lot
easier for your developers to implement things correctly. Second, remember that because
there are a number of different densities, for optimal
crispness of assets you want to make sure that you
provide those graphic assets, those PNG files in all the
different densities. So here’s an example
of a share icon. You want to make sure that
you’re providing it in four different densities, if
possible, in XHDPI all the way down to MDPI. And to do again the calculation
for the sizes of these things, you simply use
the formula we used before. So if we know that we want to
have a 32 DP square icon, we’ll know that on an XXHDPI
device, the asset you need for that should be 96
by 96 pixels. So that’s it on today’s design
byte on how screen density, and specifically,
density-independent pixels should affect your workflow
as a designer. Stay tuned for more design bytes
on how to put this into practice in tools like
Photoshop and Illustrator and so on. Thanks.

47 Replies to “DesignBytes: Density-independent Pixels”

  1. Today's intro-level #DesignBytes video from @Roman Nurik is about density-independent pixels.

    Also relevant is the protip on creating assets for different screen densities here: https://plus.google.com/+AndroidDevelopers/posts/D4qjK4HLX9u

    #AndroidDesign

  2. The ratio will always be the same. Different font sizes only adjust the factor. For example 1sp equals 1dp * (0.90..1.15). Don't know the exact numbers.
    You can try to make the button height/width/margins also in sp. That might help in some cases.

  3. Roman, very good "design byte". It drove home some profoundly simple stuff that my brain was simply refusing to pick up on before. But, I must say, you seem somewhat flat and almost depressed without your compatriots.

  4. dp can vary some between devices therefore mm will not be correct. I'm also guessing it's easier to remain backwards compatibility by using the dp for the mdpi-display which would otherwise be pixels?

  5. its a good video but for some reason DP doesnt actually work in a lot of cases, it DOES not occupy the same amount of screen space, I see this every day so I wonder why the DP thing even really exists, I have designed many apps too.

  6. Roman, you are my freaking hero! I have avoided understanding densities for as long as I could. Tried reading up on it and talking to others. Coming from a web and graphic design background I could not understand densities. This video made me realize I have been thinking about it completely wrong and now I get it. Thank you, Thank you, Thank you!

  7. So if setting a single dp pixel in my app results in setting 4 pixels on an XHDPI screen, how does that reduce granularity?

  8. Thanks for the video. I just wanted to say that what you call "dpi" is in fact ppi (pixels per inch). Dpi (dots per inch) is for print and has nothing to do with pixels per inch. 

  9. So if the 2013 nexus 7 screen is in 960 x 600 dp, should I make my illustrator canvas 960px x 600px when I am working on layout? Thanks.

  10. Oh my gawd, I am searching for 3 days already about an good explanation on the Density-independent Pixels and I'm so glad that I have found this useful & easy explaining video about dpi's simply because I've really lost myself completely in the android documentation. The thing was that I just required an information on how to really just scale my simple made asset image so it won't look blurred on other screen sizes. Thank's for this awesome and helpful video.

  11. Hi ! smart, sparkles and coloured guys

    we need a little help

    All the Material design guide line are in dp
    How can we use / work with Density Pixel in Photoshop?

    Thanks for the help
    Cheers
    Stefano

  12. So 1920/2 and 1200/2 == 960x600dip. Would 2 be the device pixel ratio? and would the 960x600dip be the logical resolution?

  13. Hello sir if we start Android app design and I will take size 960 by 600 what will be top bar size and font sizes plss reply

  14. I know the same guy did this explanation but its much easier to follow here than on the material design udacity course.

  15. Very well explained! I tried different web resources and some of them made me even more confused about the subject! So thanks a lot!

  16. Very helpful. I don`t see much designers here in Brazil worried about it. Actually most of the designers here don`t mention the material design documentation when talkin' about UI. Thanks a lot for the explanation.

  17. soooo when im making a document in photoshop to make the UI and icons in, how does this translate to the doccument settings before i start?

  18. Here's a simple explanation: A dip (or dp) is 1/160th of an inch. Use dips when you want something to appear the same physical size (i.e. in real-world inches) on any device. If you want a button to be 1 inch tall, then specify its height to be 160 dips. It'll appear 1 inch tall on any device. If you instead specify the height as 160 px, the button will appear 1 inch tall only on devices that have a pixel density of MDPI (160 dpi); screens with higher densities will show the button physically shorter.

  19. Can anyone help me find the right sensitivity I would need for my anroid phone I'm playing on a 1920×1080 368 pixels per inch 480 dpi and 152mm

  20. Yet another unit of length. Congratulations! Do you enjoy converting units? Ever heard of the Mars Climate Orbiter? Wasn't that enough of a lesson? Use millimeters!

  21. This is the point I got confused on: 'density independent pixel' sounds a lot like you're making an asset out of a certain number of pixels, then telling the software to scale those pixels up/down for different resolutions, which straight away sounds like a horrible idea.

    Now, I'm thinking that a 'dp' is in fact a unit of measurement, one which pretends every display is mdpi so that we can still design apps according to pixel numbers, but really is interchangeable with millimetres etc.

    Is that correct?

Leave a Reply

Your email address will not be published. Required fields are marked *