Android Resources - which resolutions should go into the hdpi, ldpi, mdpi and xhdpi directories

Question

I'm trying to write an application that will work well on all screen sizes, for that I have my graphic designer produce images that are in the requested dpis for each directory (Low density (120), ldpi, Medium density (160), mdpi, High density (240), hdpi, Extra high density (320), xhdpi) however, they want to know at which resolution and aspect ratio each image should be, after looking around the android documenation, namely: 1)http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources 2)http://developer.android.com/guide/practices/screens_support.html I came up with the following information: It is not exact that android supports 3 screen sizes, android is an OS that can run virtually on any screen size but there are some screen sizes that are more common than others, these are demonstrated in the table below (taken from http://developer.android.com/guide/practices/screens_support.html)

Table 1. Screen sizes and densities of emulator skins included in the Android SDK. Low density (120), ldpi Medium density (160), mdpi High density (240), hdpi Extra high density (320), xhdpi Small screen QVGA (240x320)
Normal screen WQVGA400 (240x400) WQVGA432 (240x432) HVGA (320x480) WVGA800 (480x800) WVGA854 (480x854)
Large screen WVGA800* (480x800) WVGA854* (480x854)
Extra Large screen

It’s worth noting here that even though it seems that there is no correlation between these screen sizes, there is a 3:4:6 scaling ratio between the three densities, so a 9x9 bitmap in ldpi is 12x12 in mdpi and 18x18 in hdpi (see http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources).

We can see some more information on what the screen sizes mean here:

Screen size • small: Screens based on the space available on a low-density QVGA screen. Considering a portrait HVGA display, this has the same available width but less height—it is 3:4 vs. HVGA's 2:3 aspect ratio. Examples are QVGA low density and VGA high density. • normal: Screens based on the traditional medium-density HVGA screen. A screen is considered to be normal if it is at least this size (independent of density) and not larger. Examples of such screens a WQVGA low density, HVGA medium density, WVGA high density. • large: Screens based on the space available on a medium-density VGA screen. Such a screen has significantly more available space in both width and height than an HVGA display. Examples are VGA and WVGA medium density screens. • xlarge: Screens that are considerably larger than the traditional medium-density HVGA screen. In most cases, devices with extra large screens would be too large to carry in a pocket and would most likely be tablet-style devices. Added in API Level 9.

We can also support specific aspect ratios, as defined here:

Screen aspect • long: Long screens, such as WQVGA, WVGA, FWVGA • notlong: Not long screens, such as QVGA, HVGA, and VGA

-- All of this however, is not enough to answer the simple question of what the resolution should be on those images - can they all be cut from the same high res image or should they be re-done for each dpi since the aspect ratio is different? please help, this is holding up my project Thanks!

Answer 1

It depends on your images, really. Very tiny graphics you'll probably want to draw separately, since you're going to lose fine details when interpolating to smaller sizes, whereas with larger ones, you'll probably be fine just rescaling, starting with a high resolution image.

For background images, that's always kind of a tricky one. Since you can't count on a specific resolution, you can either estimate and go with one slightly smaller than the average, and turn it into a 9-patch, where the edges will stretch to cover the leftover space, or you can go with one slightly larger than the average (something like 900 x 500) and just make sure the edge area doesn't contain any pertinent information. Basically, think of it like a bleed for print, it's just extra area that may be cut off if the screen's not big enough. It's easier to just use some sort of gradient drawable or other resolution independent type of image for the background, if possible, due to the large number of different resolutions to support.

Answer 2

When I'm creating graphics I considering this way: ldpi 240x320 mdpi 320x480 hdpi 480x800 xhdpi 800x1280

Putting images separate drawable folders, drawable-hdpi, drawable-mdpi....

Background is a bit tricky, you may do so with bg or even set it from your program not layout xml file. That will provide you more flexibility, to chose weather you going to resize or crop it.