Using Built-In Layout Classes Android

We talked a lot about the LinearLayout layout, but there are several other types of layouts. Each layout has a different purpose and order in which it displays its child View controls on the screen. Layouts are derived from android.view.ViewGroup. The types of layouts built-in to the Android SDK framework include

FrameLayout

LinearLayout

RelativeLayout

TableLayout

All layouts, regardless of their type, have basic layout attributes. Layout attributes apply to any child View within that layout. You can set layout attributes at runtime programmatically, but ideally you set them in the XML layout files using the following syntax:

There are several layout attributes that all ViewGroup objects share. These include size attributes and margin attributes. You can find basic layout attributes in the ViewGroup.LayoutParams class. The margin attributes enable each child View within a layout to have padding on each side. Find these attributes in the View Group .Margin Layout Params classes. There are also a number of ViewGroup attributes for handling child View drawing bounds and animation settings.

Some of the important attributes shared by all ViewGroup subtypes are shown in Table.

Important ViewGroup Attributes

Here’s an XML layout resource example of a LinearLayout set to the size of the screen, containing one TextView that is set to its full height and the width of the LinearLayout (and therefore the screen):

Remember that layout elements can cover any rectangular space on the screen; it doesn’t need to be the entire screen. Layouts can be nested within one another. This provides great flexibility when developers need to organize screen elements. It is common to start with a FrameLayout or LinearLayout (as you’ve seen in many of the previous chapter examples) as the parent layout for the entire screen and then organize individual screen elements inside the parent layout using whichever layout type is most appropriate.

Now let’s talk about each of the common layout types individually and how they differ from one another.

Using FrameLayout

A FrameLayout view is designed to display a stack of child View items. You can add multiple views to this layout, but each View is drawn from the top-left corner of the layout. You can use this to show multiple images within the same region, as shown in Figure, and the layout is sized to the largest child View in the stack.

You can find the layout attributes available for FrameLayout child View objects in android.control.FrameLayout.LayoutParams.Table describes some of the important attributes specific to FrameLayout views.

Important FrameLayout View Attributes

An example of FrameLayout usage.

Here’s an example of an XML layout resource with a FrameLayout and two child View objects, both ImageView objects. The green rectangle is drawn first and the red oval is drawn on top of it. The green rectangle is larger, so it defines the bounds of the FrameLayout:

Using LinearLayout

A LinearLayout view organizes its child View objects in a single row, shown in Figure, or column, depending on whether its orientation attribute is set to horizontal or vertical.This is a very handy layout method for creating forms.

An example of LinearLayout (horizontal orientation).

You can find the layout attributes available for LinearLayout child View objects in android. control. Linear Layout. Layout Params. Table describes some of the important attributes specific to Linear Layout views.

Important LinearLayout View Attributes

Using RelativeLayout

The RelativeLayout view enables you to specify where the child view controls are in relation to each other. For instance, you can set a child View to be positioned “above” or “below” or “to the left of ” or “to the right of ” another View, referred to by its unique identifier. You can also align child View objects relative to one another or the parent layout edges. Combining RelativeLayout attributes can simplify creating interesting user interfaces without resorting to multiple layout groups to achieve a desired effect. Figure shows how each of the button controls is relative to each other.

You can find the layout attributes available for RelativeLayout child View objects in android. control. Relative Layout. Layout Params. Table describes some of the important attributes specific to RelativeLayout views.

An example of RelativeLayout usage.

Important RelativeLayout View Attributes

Here’s an example of an XML layout resource with a RelativeLayout and two child View objects, a Button object aligned relative to its parent, and an ImageView aligned and positioned relative to the Button (and the parent):

Using TableLayout

A TableLayout view organizes children into rows, as shown in Figure. You add individual View objects within each row of the table using a TableRow layout View (which is basically a horizontally oriented LinearLayout) for each row of the table. Each column of the TableRow can contain one View (or layout with child View objects).You place View items added to a TableRow in columns in the order they are added. You can specify the column number (zero-based) to skip columns as necessary (the bottom row shown in Figure demonstrates this); otherwise, the View object is put in the next column to the right. Columns scale to the size of the largest View of that column. You can also include normal View objects instead of TableRow elements, if you want the View to take up an entire row.

An example of TableLayout usage.

You can find the layout attributes available for TableLayout child View objects in android. control. Table Layout. Layout Params. You can find the layout attributes available for TableRow child View objects in android. control. TableRow. Layout Params. Table describes some of the important attributes specific to Table Layout View objects.

Important TableLayout and TableRow View Attributes

Here’s an example of an XML layout resource with a TableLayout with two rows (two TableRow child objects). The TableLayout is set to stretch the columns to the size of the screen width. The first TableRow has three columns; each cell has a Button object. The second TableRow puts only one Button view into the second column explicitly:

Using Multiple Layouts on a Screen

Combining different layout methods on a single screen can create complex layouts. Remember that because a layout contains View objects and is, itself, a View, it can contain other layouts. Figure demonstrates a combination of layout views used in conjunction to create a more complex and interesting screen.