Support for Multiple Screen Resolutions

How to create an application for multiple screen resolutions

The good news is that Android 1.6 had already introduced many features that help a developer to create one application that performs well and takes advantage of a high resolution display, while still working well on standard HVGA devices.

There is already a lot of information on this available on Google's Android Developer Blog and in the Developer Guide.

This article in particular points out how the techniques apply to DROID and Milestone WVGA display devices, and points out some common pit-falls for developers.

All the features described have been available starting with Android SDK 1.6 and are also part of the Android 2.0 runtime on DROID and Milestone devices.

Screen resolution and SDK level

For applications that specify a "Minimum API level" of 3 or lower in their manifests, the Android runtime will automatically scale all screen resolutions to match the expected HVGA resolution sizes. This means that older applications should run on newer, high resolution devices, but there are still a few things to watch out for, like different aspect ratios described below.

By default Android assumes any application indicating API level 4 and higher in its manifest (Android 1.6 Donut or later), will properly handle a high resolution display, and the developer has tested the application against WVGA.

For more information on how to explicitly state which screen sizes an application supports, see the <supports-screens> manifest tag in the Android documentation.

Different X and Y scaling aspect ratios

DROID has been optimized to display wide-screen multimedia (movie) content at its native aspect ratio of 16/9. This is different from the HVGA aspect ratio of 3/2, which is the traditional computer screen format.

What this means is that when content is scaled up to "full screen", the horizontal (X*1.5) and vertical (Y*1.77) scaling factors are different. As a result, when displaying the same bitmap as a full screen background, round circles can appear as ovals, and squares are elongated to rectangles. This distortion also impacts the visual integrity of fonts and other graphical assets.

While this may only be a small visual annoyance in the best cases, in some cases this needs to be paid special attention.

In this example, a round image is stretched vertically, resulting in an oval display on the screen. If this is only background textures, the stretching to full screen may be the desired way to handle the larger WVGA screen. In other cases, the developer may have to take measures to ensure the content is not distorted. This can be achieved by padding the extra screen area or using other layout techniques to ensure a proper positioning and equal scaling along both x and y axis.

For developers testing their applications, this effect can be verified on the emulator. To create an Android emulator virtual device with WVGA resolution, you can use the command-line:

./android create avd -n MyDroid -t 4 -s WVGA854

./emulator -avd myDroid

Mixing runtime scaling and automatic scaling

Special care has to be taken when the application is displaying full-screen (automatically stretched) background images and overlays runtime generated content. Ensure that the scaling factors are handled correctly, or the resulting combined images may not match up. This is also a concern for defining on-screen "touch" areas, which need to match defined areas on the background image.

This is a common use-case for games like this simple "Tic Tac Toe" application.

In this application, the background image showing the playing field has been scaled to fill the entire screen. The playing pieces "X" and "O" are drawn at runtime based on touchscreen inputs.

The runtime scaling for the touchscreen inputs and the drawing of the pieces is based on a 150% scale ratio in both X and Y direction, which causes the background and foreground to be "out of sync". The touch areas and the game pieces do not line up with the background.

A better way to organize this layout would have been to fill only the background with the gray texture, and overlay the black squares in a layout container that scales equally with 150% in both directions.

Conclusion

Even though Android 1.6 has various mechanisms to create applications that can perform very well on different display sizes, including the "large" WVGA displays of DROID and Milestone, developers still need to test their applications and take care to not implicitly rely in their applications on the size or aspect ratio of an HVGA screen layout.