//
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);
	tmpIV.setImageResource(images[i]);
	tmpIV.setId(i);
	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);
	}
	else
	{
		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);
		tmpIV.setImageResource(images[i]);
		TableRow.LayoutParams tmpLP = new TableRow.LayoutParams(j);
		tmpIV.setLayoutParams(tmpLP);
		tr.addView(tmpIV, 150, 150);
	}
	tableLayout.addView(tr, new TableLayout.LayoutParams(
			LayoutParams.FILL_PARENT,
			LayoutParams.WRAP_CONTENT));
}

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));
gridView.setColumnWidth(150);
gridView.setNumColumns(GridView.AUTO_FIT);
gridView.setVerticalSpacing(10);
gridView.setHorizontalSpacing(10);

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

Advertisements

About Xiang 'Anthony' Chen

Making an Impact in Your Life

Discussion

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: