13

I have two images I want to display within my app.

The first image is to be full screen (as a background for the app). I have read the 'Supporting Multiple Screens' article on developers.android.com multiple times but, I am still at a loss as to what size the image should be for each dpi category. I have attempted what I thought to be the correct sizes but, when viewing the app on larger screens (ie. 1280x800@mdpi), I find that the background appears pixelated. This is understandable since my image for mpdi is 320x480px. How can I correct this? What size image should I use?

The second image is a button. Currently I have the image at a very high resolution but, the app scales this down so it looks fine. However, I do not wish for it to be this way when the app is released. For this image, I need to know what size in pixels the image should be. Currently, it is 60dp x 50dp within the app. What would this convert to in pixels? I know to use the formula px = dp * (dpi / 160) but, what would the dpi be in this case? I cannot use a NinePatch PNG for this image.

I do not understand what size (in pixels) to make my images to begin with so that they appear correctly on Android devices. Does dp = px if you are on a mdpi device?

UPDATE:

After hours of banging my head around, I have came up with the following:

drawable-xlarge-xhdpi   2560x1920px
drawable-large-xhdpi    1920x1440px
drawable-normal-xhdpi   1280x960px

drawable-xlarge-hdpi    1920x1440px
drawable-large-hdpi     1440x1080px
drawable-normal-hdpi    960x720px

drawable-xlarge-mdpi    1280x960px
drawable-large-mdpi     960x720px
drawable-normal-mdpi    640x480px

drawable-xlarge-ldpi    960x720px
drawable-large-ldpi     720x540px
drawable-normal-ldpi    480x360px

These will be my drawable directories and the maximum resolution I expect for each one (I've decided not to support small screens). Therefore, my images will be these sizes.

It looks great on my phone. I see no artifacts. It also appears to work on the emulator for a screen with 1280x800@mpdi so hopefully it will work on all devices...

Does anyone see a problem with doing it this way? Is there a better way to do this? Do my calculations look correct?

Community
  • 1
  • 1
netman74501
  • 151
  • 1
  • 9
  • I would have been happy to have the sizes for the small screens, as I try to support old phones for my app (I hate technological obsolescence). – Vincent Cantin Sep 03 '14 at 04:48

2 Answers2

2

here you go, i got it off here, im just passing it along

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
xhdpi
Vertical = 960 * 320 / 160 = 1920px
Horizontal = 720 * 320 / 160 = 1440px

px = dp*dpi/160
JRowan
  • 6,824
  • 8
  • 40
  • 59
  • Okay. That helps a bit, Thank you. However, as I stated, viewing the image on a device that is 1280x800@mdpi appears pixelated. 320px x 480px is what I have used for mdpi. So then, why does it appear pixelated? – netman74501 Mar 13 '13 at 00:46
  • is it a full screen image, because scaling up would leave artifacts, maybe Config.(RGBA8888,RGB565,etc..)? – JRowan Mar 13 '13 at 00:51
  • I just picked up on the words "at least". I have now made my background image (which is fullscreen) 960px x 720px for mdpi. However, the background still pixelates. Any ideas? – netman74501 Mar 13 '13 at 00:59
  • im thinking, ill go look around, maybe someone else will add some input – JRowan Mar 13 '13 at 01:13
  • Thank you and good luck. I've been searching for an answer to this for quite some time. In fact, I've completed the rest of the app while putting this off. It is the last hurdle I have to overcome. – netman74501 Mar 13 '13 at 01:21
  • try to make it 1280X800 exact as the device and see if it pixelates then – JRowan Mar 13 '13 at 01:28
  • I thought of that. However, if there are other devices that have weird mixes of dpi and pixels, how do I also account for them? I could use Alex's suggestion if I knew every device that doesn't fit the normal categories of dpi vs pixels. – netman74501 Mar 13 '13 at 01:33
  • How do games like Angry Birds, etc. do it? I tried decompiling and looking at their resources but, they don't seem to use the four drawable categories at all. They use an assets folder. – netman74501 Mar 13 '13 at 01:38
  • i use assets for games, i use openGL it works really good, im getting better and better at it, its a whole different thing, all i use the drawable folders for is the icons and openGL stretches the view the same to every device, so if you define the view 320X480 every device is going to be that – JRowan Mar 13 '13 at 01:41
  • ill keep an eye out, let me know if you solve the problem, im just living and learning also – JRowan Mar 13 '13 at 01:42
  • Okay. I don't know OpenGL. Thank you for your time! – netman74501 Mar 13 '13 at 01:44
0

Use method in JRowan's answer and you can add desired images for "special" screens to res folders like here:

res/drawable-xlarge-mdpi/background.png

or

res/drawable-sw600dp-mdpi/background.png
...
Alex
  • 688
  • 6
  • 8
  • Then the question becomes: What would be classified as a special screen and what size would I make the images for those special screens? – netman74501 Mar 13 '13 at 01:19
  • Please see updated question. I believe I have been able to do what you are suggesting. – netman74501 Mar 13 '13 at 06:26
  • Looks like you solve your issue. By special screens I ment these that do not follow the rule of higher dpi -> higher screen size. I know that doesn't cover all possible screens. But the best answer I have found until now is to cover screen size and dpi. By using these technique you are able to cover phones as well as tablets. Hope it helps you... – Alex Mar 14 '13 at 00:06
  • I can see one small problem. The best way is to provide base size - as stated in JRowan's answer as mdpi and all other densities are scaled as here: 0.75 ldpi 1.5 hdpi 2 xhdpi – Alex Mar 14 '13 at 00:11
  • I thought I have done so. Normal screens are between 470x320@mpdi and 640x480@mpdi. This is why I have my bitmap 640x480 for the normal category at mpdi. Is this not correct? – netman74501 Mar 14 '13 at 00:53
  • Your mdpi and ldpi sizes for normal size should be 320x480 and 240x320. Scale other sizes for ldpi and mdpi according to this base, hpdi and xhdpi seems fine – Alex Mar 14 '13 at 20:51
  • Are you able to explain why? According to the 'Supporting Multiple Screens' article, normal screens are at least 470dp x 320dp. That means normal screens should be at least 470px x 320px. Why would I want to use what the article states as a minimum instead of the maximum resolution that will be seen in each category? – netman74501 Mar 15 '13 at 01:44
  • You're right. I forgot that you doesn't support small screen so the base screen is normal, sorry for that – Alex Mar 17 '13 at 20:05
  • If tou find any of these comments or answers helpful please vote up. – Alex Mar 21 '13 at 19:14
  • The site tells me that voting up requires 15 reputation... I would mark an answer as the answer but, both helped me come to the answer so I'm not sure which to mark. – netman74501 Mar 21 '13 at 19:59
  • Perhaps this question has fallen off, but for new people looking for an answer to this, does it matter that your image will be stretched in ways that would change the original HxW ratio? In other words, if you fill the whole screen on different devices, say d1 is 4x3 and d2 is 5x3, the image will look warped. – robkriegerflow Mar 17 '16 at 02:07