How do I figure out what size (in pixels) an image needs to be for Android to display that image correctly across devices?

Question

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?

Rakel

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). – Jadwiga

Answer 1

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

Batruk

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? – Rakel

is it a full screen image, because scaling up would leave artifacts, maybe Config.(RGBA8888,RGB565,etc..)? – Batruk

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? – Rakel

im thinking, ill go look around, maybe someone else will add some input – Batruk

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. – Rakel

try to make it 1280X800 exact as the device and see if it pixelates then – Batruk

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. – Rakel

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. – Rakel

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 – Batruk

ill keep an eye out, let me know if you solve the problem, im just living and learning also – Batruk

Okay. I don't know OpenGL. Thank you for your time! – Rakel

Answer 2

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
...

Rollway

Then the question becomes: What would be classified as a special screen and what size would I make the images for those special screens? – Rakel

Please see updated question. I believe I have been able to do what you are suggesting. – Rakel

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... – Rollway

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 – Rollway

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? – Rakel

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 – Rollway

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? – Rakel

You're right. I forgot that you doesn't support small screen so the base screen is normal, sorry for that – Rollway

If tou find any of these comments or answers helpful please vote up. – Rollway

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. – Rakel

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. – Seafowl