Supporting Multiple Displays – Part 2

In Supporting Multiple Displays – Part 1 we began looking at a layout which would work across a variety of screen sizes, aspect ratios, and densities. We covered some general rules about how best to achieve this, but in this article we’re going to examine the layout XML that we have used in the example from Part 1.

The key to this working across the range of devices is the layout XML. While res/layout/main.xml is quite large, if we break it down into its components is is relatively straightforward.

Firstly, it is worth noting that there are only two “pixel” values in the entire layout (although there are some padding, margin and textSize values which are applied through styles). Much of the layout is achieved through relative positioning, and layout_weights.

At the top level, there is a RelativeLayout which has two children: An ImageView (which is our wallpaper, which fills the screen), and a LinearLayout named “Body” which also fills the screen but sits on top of the wallpaper.

	
	
		.
		.
		.
	

The Wallpaper ImageView has android:scaleType=”centerCrop” set to control how it trys to display the image.

The Body layout is a vertical layout which contains two children: A LinearLayout named Workspace which contains the grid of icons, and a RelativeLayout named ControlBar, which encapsulates the controls at the bottom of the screen. Both of these have layout_height set to “wrap_content”, but Workspace has layout_weight=”1″ which results in it filling the remaining space once ControlBar has been sized and positioned.

	
		.
		.
		.
	
	
		.
		.
		.
	

Workspace is effectively a 4 x 4 table, with each cell containing and icon and text. For clarity, we’ve only included a single icon, the Email one, which is in the rightmost cell of the bottom row. We are using layout_weights in both horizontal and vertical directions to create a grid of equally sized cells.

ControlBar is the most complex of the sub-layouts that we’ve looked at so far, but even then it is relatively straightforward if we break it down into its components. We have two images representing the Home arrows (the little dots that denote which of the screens we’re on) these are positioned at either edge using layout_alignParentLeft=”true” and layout_alignParentRight=”true”. In the centre is a RelativeLayout which is centred at the bottom of ControlBar. This contains three ImageView controls which represent the phone, all apps, and browser buttons which are positioned using relative positioning attributes.

When designing dynamic layouts, it is useful to break them down in to manageable components in much the way that we have analysed them in this article. Often it can be useful to design the high level blocks (similar to the examples used in the articles on Layout Weights) and, once we’re happy with that, continue to the finer-grained layouts.

Hopefully this article and the previous one have given some useful techniques and insights in to how to create layouts which work well across a variety of devices. Please study the code and resources for this article. The vast majority of the techniques used throughout has been covered in other articles on this blog.

© 2011, Mark Allison. All rights reserved.

Copyright © 2011 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.