Supporting Multiple Screens Using Drawables Different Density

Standard

Android supports several configuration qualifiers that allow you to control how the system selects your alternative resources based on the characteristics of the current device screen. A configuration qualifier is a string that you can append to a resource directory in your Android project and specifies the configuration for which the resources inside are designed.

To use a configuration qualifier:

  1. Create a new directory in your project’s res/ directory and name it using the format:<resources_name>-<qualifier>
    • <resources_name> is the standard resource name (such as drawable or layout).
    • <qualifier> is a configuration qualifier from table 1, below, specifying the screen configuration for which these resources are to be used (such as hdpi or xlarge).

    You can use more than one <qualifier> at a time—simply separate each qualifier with a dash.

  2. Save the appropriate configuration-specific resources in this new directory. The resource files must be named exactly the same as the default resource files.

For example, xlarge is a configuration qualifier for extra large screens. When you append this string to a resource directory name (such as layout-xlarge), it indicates to the system that these resources are to be used on devices that have an extra large screen.

  • ldpi: Low-density screens; approximately 120dpi. (Density-independent pixel)
  • mdpi: Medium-density (on traditional HVGA) screens; approximately 160dpi.
  • hdpi: High-density screens; approximately 240dpi.
  • xhdpi: Extra high-density screens; approximately 320dpi. Added in API Level 8
  • nodpi: This can be used for bitmap resources that you do not want to be scaled to match the device density.
  • tvdpi: Screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a “primary” density group. It is mostly intended for televisions and most apps shouldn’t need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. This qualifier was introduced with API level 13.

There is a 3:4:6:8 scaling ratio between the four primary densities (ignoring the tvdpi density). So, a 9×9 bitmap in ldpi is 12×12 in mdpi, 18×18 in hdpi and 24×24 in xhdpi.

If you decide that your image resources don’t look good enough on a television or other certain devices and want to try tvdpi resources, the scaling factor is 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi.

Note: Using a density qualifier does not imply that the resources are only for screens of that density. If you do not provide alternative resources with qualifiers that better match the current device configuration, the system may use whichever resources are the best match.

See Supporting Multiple Screens for more information about how to handle different screen densities and how Android might scale your bitmaps to fit the current density.

Illustration of how Android roughly maps actual sizes and densities to generalized sizes and densities (figures are not exact).

Illustration of how Android roughly maps actual sizes and densities to generalized sizes and densities (figures are not exact).

As you design your UI for different screen sizes, you’ll discover that each design requires a minimum amount of space. So, each generalized screen size above has an associated minimum resolution that’s defined by the system. These minimum sizes are in “dp” units—the same units you should use when defining your layouts—which allows the system to avoid worrying about changes in screen density.

  • 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

Declaring screen size support:

if your application is only for tablet-style devices with a 600dp smallest available width:

<manifest ... >
 <supports-screens android:requiresSmallestWidthDp="600" />
 ...
</manifest>

Configuration examples

To help you target some of your designs for different types of devices, here are some numbers for typical screen widths:

  • 320dp: a typical phone screen (240×320 ldpi, 320×480 mdpi, 480×800 hdpi, etc).
  • 480dp: a tweener tablet like the Streak (480×800 mdpi).
  • 600dp: a 7” tablet (600×1024 mdpi).
  • 720dp: a 10” tablet (720×1280 mdpi, 800×1280 mdpi, etc).

Using the size qualifiers from table 2, your application can switch between your different layout resources for handsets and tablets using any number you want for width and/or height. For example, if 600dp is the smallest available width supported by your tablet layout, you can provide these two sets of layouts:

res/layout/main_activity.xml # For handsets
res/layout-sw600dp/main_activity.xml # For tablets

In this case, the smallest width of the available screen space must be 600dp in order for the tablet layout to be applied.

mdpi is the reference density — that is, 1 px on an mdpi display is equal to 1 dip. The ratio for asset scaling is:

ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1    | 1.33  | 1.5  | 2     | 3      | 4

Although you don’t really need to worry about tvdpi unless you’re developing specifically for Google TV or the original Nexus 7 — but even Google recommends simply using hdpi assets. You probably don’t need to worry about xxhdpi either (although it never hurts, and at least the launcher icon should be provided at xxhdpi), and xxxhdpi is just a constant in the source code right now (no devices use it, nor do I expect any to for a while, if ever), so it’s safe to ignore as well.

What this means is if you’re doing a 48dip image and plan to support up to xhdpi resolution, you should start with a 96px image (144px if you want native assets for xxhdpi) and make the following images for the densities:

ldpi    | mdpi    | tvdpi    | hdpi    | xhdpi     | xxhdpi    | xxxhdpi
36 x 36 | 48 x 48 | 64 x 64  | 72 x 72 | 96 x 96   | 144 x 144 | 192 x 192

And these should display at roughly the same size on any device, provided you’ve placed these in density-specific folders (e.g. drawable-xhdpi, drawable-hdpi, etc.)

For reference, the pixel densities for these are:

ldpi  | mdpi  | tvdpi  | hdpi  | xhdpi  | xxhdpi  | xxxhdpi
120   | 160   | 213    | 240   | 320    | 480     | 640

Leave a Reply

Your email address will not be published. Required fields are marked *