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.