you're reading...
HCI, Tech

Four Layouts in Android Applications

The goal of this post is to illustrate Android’s four different layouts using a set of images. Basically it re-organizes the content on this page.

1. LinearLayout

To start, let’s try simply loading and showing these images using a simple basic LinearyLayout – try it here.

With linearlayout, you place items along either a horizontal or vertical (invisible) line, such as:

Figure 1. LinearLayout

2. RelativeLayout

Simlarly, we can specify the spatial relationship between different items (above, below, left_of, right_of, etc.).

To illustrate this, let’s create a weird layout where half of the images go vertically down and the other half horizontally right, like an up-side-down ‘L’.

We can do it based on the first example. First, create a RelativeLayout:

RelativeLayout relativeLayout = new RelativeLayout(this);

Then, load the images similarly but specify the layout parameters differently:

int numImages = images.length;
for(int i = 0; i < numImages; i++)
	ImageView tmpIV = new ImageView(this);
	RelativeLayout.LayoutParams tmpLayoutParams = new RelativeLayout.LayoutParams(100, 100);
	int tmpVerb = i < numImages / 2 ? RelativeLayout.BELOW : RelativeLayout.RIGHT_OF;
	if(i > 0)
		tmpLayoutParams.addRule(tmpVerb, i - 1);
		tmpLayoutParams.addRule(RelativeLayout.ABOVE, i + 1);
	relativeLayout.addView(tmpIV, tmpLayoutParams);

Figure 2. RelativeLayout

3. TableLayout

A TableLayout says which row and column to place the items on the screen. Similarly, we first declare it:

TableLayout tableLayout = new TableLayout(this);

Then as usual we load the images. The difference is: we load them following the structure of a table:

int numColumns = 3;
int numImages = images.length;
for(int i = 0; i < numImages;)
	TableRow tr = new TableRow(this);
	for(int j = 0; j < numColumns && i < numImages; j++, i++)
		ImageView tmpIV = new ImageView(this);
		TableRow.LayoutParams tmpLP = new TableRow.LayoutParams(j);
		tr.addView(tmpIV, 150, 150);
	tableLayout.addView(tr, new TableLayout.LayoutParams(

The resulting screenshot is shown in Figure 3.

Figure 3. TableLayout

4. Grid View

GridView, though a different data structure from ‘XXXLayout’, can also decide the actual layout of items by defining the geometric structures of a grid:

GridView gridView = new GridView(this);
gridView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

To load the images into this view, we need to set its ‘Adapter’. An adapter is the bridge between the the view and its underlying data:

gridView.setAdapter(new ImageAdapter(this));

The source code for this ImageAdapter class can be found (using Ctrl-F) in this page. In essence, GridView is very similar to TableLayout, see Figure 4.

Figure 4. GridView


About Xiang 'Anthony' Chen

Making an Impact in Your Life


No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Twitter Updates

%d bloggers like this: