How do I figure out what size (in pixels) an image needs to be for Android to display that image correctly across devices?
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?
Answer
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