hi. my name is roman nurik from theandroid team at google. and in today's design, i'd liketo talk to you about how screen pixel density affectsyour workflow as an android app designer.
Android pixel, let's take a look. so the first thing to understandis that android devices come in allshapes and sizes. and the screens on thesedevices have
different pixel densities. and this number is measuredin dots per inch, or dpi. and these pixel densities simplysay in a given square, say, inch of space onthe screen, how many pixels will fit in? and this determines very muchthe level of crispness that you're going to see graphics andtext and things like that on that screen. so in this example, here acouple of different dpi
values, possible dpi values andhow text, in this case, the letter a, would be renderedon those screens. you'll notice that on the higherdensity screens, the letter a is rendered in a muchmore crisp, a much more almost correct representation of theletter a than on the medium density screens on the left. now as a designer, these pixeldensities like 165, 234 and so on, could be very cumbersometo work with. so fortunately, android hascreated something called
logical pixel densities, orbuckets of densities that the real densities would fall into,to simplify things. so here on screen, you see acouple of the key, the most important logical densities thatyou as a designer would have to work with. so something like, if a realdevice had 165 dpi screen, that would be mappeddown to 160 dpi. and then everything that youwould do from that point on, you wouldn't have to worryabout the 165 number.
you simply think about, oh thisscreen i will treat as a 160 dpi screen. and 160 dpi is aspecial value. it's something called thebaseline density in android, where everything, andspecifically the density independent pixel units we'lltalk about in a second, where everything is based on thisbaseline density. so that's 160 dpi. at the other far end of thespectrum currently, the
highest number, the highestlogical density is extra extra high dpi, or xxhdpi, whichis 480 dots per inch. and so there are four specificdensities between 160 and 480 that you should reallybe aware of. that's 160, 240, 320, and 480. and there are a couple thatare not listed here. there's ldpi at 120 and tvdpiat 213, but those are less common, and you generallydon't need to worry about those.
so now that we understanddensity, let's now talk about something that's critical todesigning for android, and that's the density-independentpixel unit. now, density-independent pixelunits, 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 thescreen on a mdpi, or 160
dpi screen. and now if you have a singledensity independent pixel on a mdpi screen, that's onephysical pixel. but if you're on a largerscreen, let's say an xhdpi screen, it's actuallyfour pixels, two across and two down. so why do we use densityindependent pixels? well, the reason for that isthat we want to make sure that when we create layouts, andoverall kind of define the
user interface for ourapplication, we want to make sure that ui elements remainthe same physical size, approximately, across deviceswith different densities. we don't want to have to specifyfor each individual density what the sizes of ourui elements should be. so let's look at an example. so here we have 200 dips, andagain, dip units or dp units keep things roughly the samephysical size across devices. so we have 200 dp units and wehave, let's say, this wide
purple rectanglethat's spanning across a couple devices. now on an mdpi device, like thetablet you see here, 200 dps will actually resultin something that is 200 pixels tall. so again, one dp isone pixel at mdpi. now on an xhdpi device like thisnexus 4 here, the 200 dps will actually become400 pixels tall. and this is actuallybuilt-in behavior.
if you specify that somethingshould be 200 dp, it'll be the same physical size ondifferent devices. now one interesting thing aboutdp units is that since they're the same physical sizeacross devices, we can start representing physical objectsin terms of dps. so for example, the fingertip,the human fingertip is about 50 dps wide. now what that means is thatwhen 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'reabout the size of a human fingertip so that a regularperson could comfortably press that button without makingtoo many mistakes. so let's look at some maththat will help us get comfortable with convertingbetween pixels and dp units. now here's the only realformula you need. to solve for one of thevariables, you simply plug in the other two.
so let's look atsome examples. so here's the definitionof dps. one pixel is one dip or one dipis one pixel at 160 dpi. easy enough. now on a 320 dpi screen, one dipis actually two pixels-- two pixels across andtwo pixels down. so let's actually put thisequation in practice, and look at a quick exercise. so how big is the 2013nexus 7 screen in
density-independent pixels? now the information we have isthat we know that the screen is seven inches acrossdiagonally. we know that it's an xhdpiscreen, meaning it's a 320 dpi screen. and we also know that the screenresolution is 1920 by 1200 pixels. and so the first thing you maywant to ask yourself is, what information here is necessary?
now the fact that it's a seveninch screen here is not actually necessary. to calculate the number ofdensity-independent pixels, we don't actually need the diagonalscreen size if we have the number of pixelsand the density. so if you look at the formulafrom before, you'll notice that the ratio between xhdpiand mdpi is two to one. so to convert from pixels to dpunits on an xhdpi device, you simply divide by two.
so the answer here is 1920divided by 2 by 1200 divided by 2, or simply 960 by 600density-independent pixels. so you may be asking, what's thepoint of this calculation? well, the reason is thatdensity-independent pixels better capture device physicalscreen size. pixels could be the same acrossdevices of different screen sizes. for example, you can have amedium-density tablet at 1280 by 800 pixels, and an extrahigh-density phone at 1280 by
720 pixels. and their screen resolutions inpixels are almost the same. but that same phone willactually have a much smaller screen resolution whenlooked at in terms of density-independent pixels. and so density-independentpixels better capture that. so with that, let's moveon to some quick tips before we sign off. so first, remember to design andspec all of your layout in
terms of arrangement of uielements, the sizes of elements, the positionsof elements. make sure to spec thatall out in dp units. it's going to make it a loteasier for your developers to implement things correctly. second, remember that becausethere are a number of different densities, for optimalcrispness of assets you want to make sure that youprovide those graphic assets, those png files in all thedifferent densities.
so here's an exampleof a share icon. you want to make sure thatyou're providing it in four different densities, ifpossible, in xhdpi all the way down to mdpi. and to do again the calculationfor the sizes of these things, you simply usethe formula we used before. so if we know that we want tohave a 32 dp square icon, we'll know that on an xxhdpidevice, the asset you need for that should be 96by 96 pixels.
so that's it on today's designbyte on how screen density, and specifically,density-independent pixels should affect your workflowas a designer.
stay tuned for more design byteson how to put this into practice in tools likephotoshop and illustrator and so on. thanks.
