27

I have started making graphics for my Android app using Adobe Photoshop. But I am unable to proceed, as the resolution in Photoshop is set in pixels per inch where as the official Google documentation says Android will require images set in dpi. I have searched the web for the conversion between the two but never ended up with any proper formula.

I know that the Android documentation describes the relation as px = dp*dpi/160. But my problem is that if I know dpi where do I get the value of dp to be used in this calculation? Or is there any assumption about the value of dp? I am confused.

hairboat
  • 650
  • 19
  • 29
Ruchira
  • 935
  • 2
  • 15
  • 30
  • The ppi set in photoshop only affects how large image prints on paper, and has no affect on how image displays in android... – Steven Byle Apr 23 '13 at 20:39
  • Hi @StevenByle, while that's true in general, it can't mean the same thing in Android and Android's phone context, can it? How much does print definition mean to Android or Android phones that all search results you can find on the Internet e.g. "HTC Sensation screen resolution" shows PPI instead of DPI? My experience in the media industry shows that people actually uses dpi for print design and Photoshop talks as well. Many use both ppi and dpi interchangeably – ericn Aug 22 '13 at 08:22
  • 1
    @fuzzybee While ppi and dpi and not equivalent (since some screen technologies use several pixels to generate a dot, etc), Android can use either. However, Android does not use this metadata for images. For instance, create a 100x100 image at 100dpi and then at 1000dpi in photoshop. While there is no difference on how they look on your screen (always 100x100), if you print them they will be diff physical sizes. Android knows the dpi of the image depending on the drawable density folder you put it in (not the setting in photoshop), drawable-hdpi = 240dpi, drawable-xhdpi = 320dpi, etc. – Steven Byle Aug 22 '13 at 12:59
  • @fuzzybee So when you look at screen specs, you may see them in ppi, which is fine, as most screen technologies translate to 1 pixel = 1 dot. Android references dots with dpi when drawing the screen in software, since 1 pixel may not be 1 dot on all displays, it's a way of normalizing the unit. Check out my blog on [Understanding Density Independence in Android](http://blogs.captechconsulting.com/blog/steven-byle/understanding-density-independence-android) for more info. – Steven Byle Aug 22 '13 at 13:02

5 Answers5

38

Dp are Density independant pixels and are used to generalise the number of pixels a screen has. These are generalised figures taken from http://developer.android.com/guide/practices/screens_support.html

  • xlarge screens are at least 960dp x 720dp
  • large screens are at least 640dp x 480dp
  • normal screens are at least 470dp x 320dp
  • small screens are at least 426dp x 320dp

Generalised Dpi values for screens:

  • ldpi Resources for low-density (ldpi) screens (~120dpi)
  • mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
  • hdpi Resources for high-density (hdpi) screens (~240dpi).
  • xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).

Therefore generalised size of your resources (assuming they are full screen):

  • ldpi
    • Vertical = 426 * 120 / 160 = 319.5px
    • Horizontal = 320 * 120 / 160 = 240px
  • mdpi
    • Vertical = 470 * 160 / 160 = 470px
    • Horizontal = 320 * 160 / 160 = 320px
  • hdpi
    • Vertical = 640 * 240 / 160 = 960px
    • Horizontal = 480 * 240 / 160 = 720px

Edit - adding xhdpi as they are becoming more popular

  • xhdpi
    • Vertical = 960 * 320 / 160 = 1920px
    • Horizontal = 720 * 320 / 160 = 1440px

These values should be suitable for most xhdpi screens such as TVs and the Nexus 4, including the Nexus 10 (assuming they don't create a new category for this as it is 25k x 16k, don't know as I haven't got hands on one yet).

/Edit

If you use these sizes your images will look great on any screen. Be sure to define sizes in code in dp however, Android will handle the conversion described above on its own.

Michael Allen
  • 5,712
  • 3
  • 38
  • 63
  • 1
    I have read about the same.But how do I set the screen resolution as adobe photoshop defines the resolution in pixel per inch whereas google doc. gives it in dpi. – Ruchira Aug 04 '11 at 14:22
  • It depends what size screen you are working on. Usually you have 3 folder drawable-hdpi, drawable-mdpi and drawable-ldpi. Use the algorithm in your question and the dp values in my answer to calculate the correct size for your images. I have added the generalised dpi values for android sizes – Michael Allen Aug 05 '11 at 09:11
  • 2
    Thanks for the explanation.It helped to a great extent.But still the confusion to convert screen resolution from dpi to ppi remains.So I am using the following link for my assumption about screen resolution:- http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density – Ruchira Aug 09 '11 at 04:32
  • 4
    Sorry, I think I miss read the question a little. You say Photoshop requires a Pixel per inch value for size but it doesn't. The PPI setting is only used if you are going to print, for screen the only thing you are interested in is the size of the image in pixels. For android images use the pixel values I have given above, they will give sharp images on any display. e.g. for hdpi a full screen texture should be 960px x 720px and can have any dpi or ppi value. You then use dp to make sure it fills the screen in android. This means if its swapped for a smaller image it will still fill the screen – Michael Allen Aug 09 '11 at 09:10
  • @MichaelAllen what do you mean with "you then use dp to make sure it fills the screen in android"??.. if I'm giving the image its dimensions based on pixels(after converted from dpi) so, what do the densities(120dp for ldpi, 160dp for mdpi and 240dp for hdpi) have to do with any thing?? – a fair player Jan 25 '12 at 16:56
  • @afairplayer, what I think he means is that; 'dp' is how many dots will be shown regardless of the screen dimensions. Photoshop will do the dots' layout. How many inches which the screen will use in presenting those dots it does not care about. – Vass Feb 17 '12 at 23:49
  • @afairplayer you should never define layout as a number of pixels. Ever. Try downloading the Dominoes Pizza app on a large screen like a SGS2 or a tablet (I will upload a pic to show this when I get a chance) and you will see the downfall of using a pixel based measure. For filling the screen the best solution is to use % widths/heights. EG for 50% width set two layouts widths to 0dp and its layout_weight to 0.5. Then set the parents weightSum to 1.0 and the two layouts will fill 50% of the parent. – Michael Allen Feb 20 '12 at 17:06
  • Can anyone clarify something please? So, ok, i make each background image the dimensions that Michael Allen specifies in the answer. BUT, if i define the other ImageViews, that are placed on the screen, in relation to the sizes defined above (e.g. let's say an ImageView has dimensions 20x20 for the hdpi devices, if i calculate this dimensions for the ldpi devices, the image would have to be 7x7 pixels, which is terribly small) then the ldpi devices won't be able to see anything on the screen :) Or will they? Am i doing it right, or not? – AndreiBogdan Jul 15 '12 at 18:44
  • 4
    Wow this is so incredibly **WRONG**, I can't believe it got this many upvotes. Screen density and screen size are NOT the same. A tablet can be ldpi, and and tiny phone can be xhdpi, or vice versa. These calculations are all incorrect, as 160 dp is about an inch for EVERY density. smh... – Steven Byle Apr 23 '13 at 20:37
  • @StevenByle I think you might be missing the point, I never mentioned anything about size of screen. This is rough calculations for what size in pixels your images should be so they look good on every screen size. The 160dp = 1 inch you mention is roughly true and is why I used 160 as the factor I divided by in my calculations. Those calculations roughly tell you what size in pixels a full screen image must be to not look pixelated on the different screen sizes. – Michael Allen Apr 24 '13 at 10:46
  • 6
    @MichaelAllen You never mentioned the size of the screen? dp x dp represents a physical size, and all of your calculations are from the dp x dp physical sizes of screens. Your major **INCORRECT** assumption is that screen size = screen density. You calculate a small screen as always ldpi (wrong), a normal screen as always mdpi (wrong), etc. Your examples show 4 screen sizes at 4 densities. In reality, you need 4 density sizes for each screen size, so there would be 16 dimensions here (now there are 5 so 20 really). Proof - http://developer.android.com/about/dashboards/index.html#Screens. – Steven Byle Apr 24 '13 at 12:13
6

I don't agree with answer by Michael Allen because the resulting resolutions for ldpi, mdpi, hdpi and xdpi doesn't satisfy the 3:4:6:8 scaling ratios for alternative bitmaps mentioned in the google docs here under 'Alternative Drawables'

http://developer.android.com/guide/practices/screens_support.html#testing

Therefore I would suggest that you take the baseline example that has a minimum size of

470 x 320 dp now using formula from same documentation we calculate full screen resolution for baseline screen size

px = dp * (dpi/160); for baseline px = dp * (160/160) = dp * 1 so px = dp. This means the full screen size for our baseline config. in pixels would be

470 X 320 px (mdpi)

now to follow the 3:4:6:8 scaling ratios for alternative drawables sizes for ldpi, hdpi and xhdpi we need to derive the unit values from mdpi. i.e.

470/4 = 117.5

320/4 = 80

divide by 4 because scaling ratio for mdpi is 4, scaling ratios for ldpi, hdpi and xhdpi are 3,6 and 8 respectively. now just multiply the unit results 117.5 and 80 with these scaling factors

ldpi

117.5 * 3 = 352.5

80 * 3 = 240

mdpi

117.5 * 4 = 470

80 * 4 = 320

hdpi

117.5 * 6 = 705

80 * 6 = 480

xhdpi

117.5 * 8 = 940

80 * 8 = 640

These sizes are now in perfect 3:4:6:8 scaling ratios.

Nouman Hanif
  • 101
  • 1
  • 2
1

As the resolution in Photoshop is set in pixels per inch where as the official Google documentation says Android will require images set in dpi.

antyrat
  • 27,479
  • 9
  • 75
  • 76
ppi reclaim
  • 11
  • 1
1

Yes, Dp (Density independant pixels) is all Photoshop will care about. It should not consider what the density of the pixels will be. That image of a super high number of pixels may be put on a super small high definition UI button for all it cares about. Or you may have few pixels for a retro style A0 poster of Tetris. This is because they can get scaled. Few pixels are scaled up for the large area, and many pixels scaled down for the small area on a screen.

So pick your target link to sizes screen size and use that in photoshop. (also check out who uses what... pie chart of sizes used)

For the intuition this site helped me link to blog page:

At run time, the platform transparently handles any scaling of the dp units needed, based on the actual density of the screen in use.

(the platform does the scaling- the density ratio handling is done by Android; not you) and this is extremely relevant to the UI:

Using dp units to define your application’s UI is highly recommended, as a way of ensuring proper display of your UI on different screens.

Because you want the UI elements to appear the same on all devices so it will do scaling based on the number of pixels it computes in that formula. And if the dp is scaled in a way so that it becomes too spare or dense, well that won't look good.

Vass
  • 2,682
  • 13
  • 41
  • 60
0

The same on all devices so it will do scaling based on the number of pixels it computes in that formula.

eldarerathis
  • 35,455
  • 10
  • 90
  • 93
ppi news
  • 1