Designing User Interfaces for Compatibility Android

Before we show you the many ways in which you can provide custom application resources and code to support specific device configurations, it’s important to remember that you can often avoid needing them in the first place. The trick is to design your initial default solution to be flexible enough to cover any variations. When it comes to user interfaces, keep them simple and don’t overcrowd them. Also, take advantage of the many powerful tools at your disposal:

  • As a rule of thumb, design for medium- to large-size screens and medium resolutions. Over time, devices trend toward larger screens with higher resolutions.
  • For View and Layout control width and height attributes, use fill_parent (now match_parent) and wrap_content so that controls scale for different screen sizes and orientation changes.
  • For dimensions, use the flexible units, such as dp and sp, as opposed to fixed unit types, such as px, mm, and in.
  • Avoid using AbsoluteLayout and other pixel-perfect settings and attributes.
  • Use flexible layout controls such as RelativeLayout, LinearLayout, TableLayout, and FrameLayout to design a screen that looks great in both portrait and landscape modes and on a variety of different screen sizes and resolutions. Try the working square principle for organizing screen content—we talk more about this in a moment.
  • Encapsulate screen content in scalable container controls such as ScrollView and ListView. Generally, you should scale and grow screens in only one direction (vertically or horizontally), but not both.
  • Don’t provide exact positions for screen elements, sizes, and dimensions. Instead, use relative positions,weights, and gravity. Spending time up-front to get these right saves time later.
  • Provide application graphics of reasonable quality and always keep the original (larger) sizes around in case you need different versions for different resolutions at a later time.There is always a tradeoff in terms of graphic quality versus file size. Find the sweet spot where the graphic scales reasonably well for changes in screen characteristics, without bulking up your application or taking too long to display. Whenever possible, use stretchable graphics, such as Nine-Patch, which allow a graphic to change size based upon the area in which it is displayed in.

Supporting Specific Screen Types

Although you generally want to try to develop your applications to be screen independent (support all types of screens, small and large, high density and low), you can specify the types of screens your application can support explicitly when necessary using the <supports-screens> Android manifest file tag. By default, your application supports all screen types. You might want to consider this configuration option if your application—say a video app or an eBook reader—does not run well at all on small screens. For more information on this Android Manifest tag, see the Android SDK documentation.

Working with Nine-Patch Stretchable Graphics

Phone screens come in various dimensions. It can be handy to use stretchable graphics to allow a single graphic that can scale appropriately for different screen sizes and orientations or different lengths of text. This can save you a lot of time in creating graphics for many different screen sizes. Android supports Nine-Patch Stretchable Graphics for this purpose. Nine-Patch Stretchable Graphics are simply PNG graphics that have patches, or areas of the image, defined to scale appropriately, instead of scaling the entire image as one unit. Often the center segment is transparent. Figure illustrates how the image (shown as the square) is divided into nine patches.

Nine-Patch Stretchable Graphics can be created from PNG files using the draw9patch tool included with the Tools directory of the Android SDK. The interface for the draw9patch tool is straightforward. In the left pane, you can define the Nine-Patch guides to your graphic to define how it scales when stretched. In the right pane, you can preview how your graphic behaves when scaled with the patches you defined.

How a Nine-Patch Graphic of a square is scaled.

How a Nine-Patch Graphic of a square is scaled.

To create a Nine-Patch Stretchable Graphic file from a PNG file using the draw9patch tool, perform the following steps:

  1. Launch draw9patch.bat in your Android SDK tools directory.
  2. Drag a PNG file into the left pane (or use File, Open Nine-Patch).
  3. Click the Show Patches check box at the bottom of the left pane.
  4. Set your Patch Scale appropriately (higher to see more marked results).
  5. Click along the left edge of your graphic to set a horizontal patch guide.
  6. Click along the top edge of your graphic to set a vertical patch guide.
  7. A simple PNG file before Nine-Patch processing.

    A simple PNG file before Nine-Patch processing.

  8. View the results in the right pane; move patch guides until the graphic stretches as desired.
  9. To delete a patch guide, press Shift, and click on the guide pixel (black).
  10. Save your graphic with the extension .9.png (for example, little_black_box.9.png).

Using the Working Square Principle

Another way to design for different screen orientations is to try to keep a “working square” area where most of your application’s user activity (meaning, where they look and click on the screen) takes place. This area remains unchanged (or changes little beyond just rotating) when the screen orientation changes. Only functionality displayed outside of the “working square” changes substantially when screen orientation changes.

One clever example of a “working square,” which turns the idea on its head, is the Camera application on the HTC Evo 4G. In Portrait mode, the camera controls are on the bottom of the viewfinder; when rotated clockwise into Landscape mode, the camera controls stay in the same place but now they are to the left of the viewfinder. The viewfinder area would be considered the working square—the area that remains uncluttered. The controls and sliding drawer with settings are kept outside that area, so the user can compose their photos and videos.

A Nine-Patch PNG file after Nine-Patch processing with some patch guides defined.

A Nine-Patch PNG file after Nine-Patch processing with some patch guides defined

A Nine-Patch PNG file after Nine-Patch processing with different patch guides defined.

A Nine-Patch PNG file after Nine-Patch processing with different patch guides defined.

The “working square” principle.

The “working square” principle.

Evo 4G Camera application using a form of the “working square” principle.

Evo 4G Camera application using a form of the “working square” principle

When you’re using the application, visually the rotation looks as if it has had little effect. The controls moved from being below the viewfinder to being to the left of the viewfinder. It just so happens, though, that they remain in the same location on the screen. This is part of the elegance of the “working square” principal.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Android Topics