Android offers a collection of view classes that act as containers for views. These container classes are called layouts (or layout managers), and each implements a specific strategy to manage the size and position of its children. For example, the LinearLayout
class lays out its children either horizontally or vertically, one after the other. All layout managers derive from the View
class, therefore you can nest layout managers inside of one another.
The layout managers that ship with the Android SDK
LinearLayout
organizes its children either horizontally or vertically.TableLayout
organizes its children in tabular form.RelativeLayout
organizes its children relative to one another or to the parent.FrameLayout
allows you to dynamically change the control(s) in the layout.GridLayout
organizes its children in a grid arrangement.LinearLayout
The LinearLayout
layout manager is the most basic. This layout manager organizes its children either horizontally or vertically based on the value of the orientation
property. Listing below shows LinearLayout
with a horizontal configuration.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <!-- add children here --> </LinearLayout>
You can use weight
to assign size importance to a control relative to the other controls in the container. Suppose a container has three controls: one has a weight
of 1, whereas the others have a weight
of 0. In this case, the control whose weight
equals 1 will consume the empty space in the container.
Gravity
is essentially alignment. For example, if you want to align a label’s text to the right, you would set its gravity
to right. There are quite a few possible values for gravity
, including left, center, right, top, bottom, center_vertical, clip_horizontal, and others.
TableLayout
The TableLayout
layout manager is an extension of LinearLayout
. This layout manager structures its child controls into rows and columns.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow> <TextView android:text="First Name:" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:text="John" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </TableRow> <TableRow> <TextView android:text="Last Name:" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:text="Love" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </TableRow> </TableLayout>
RelativeLayout
RelativeLayout
layout manager implements a policy where the controls in the container are laid out relative to either the container or another control in the container.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/lbName" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Username: " android:layout_alignParentTop="true"/> <EditText android:id="@+id/edName" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toRightOf="@id/lbName"/> </RelativeLayout>
Besides these three layout attributes, you can also specify layout_above, layout_toRightOf, layout_toLeftOf, layout_centerInParent, and several more.
FrameLayout
The layout managers that we’ve see so far implement various layout strategies. In other words, each one has a specific way that it positions and orients its children on the screen. With these layout managers, you can have many controls on the screen at one time, each taking up a portion of the screen. Android also offers a layout manager that is mainly used to display a single item: FrameLayout
. You mainly use this utility layout class to dynamically display a single view, but you can populate it with many items, setting one to visible while the others are invisible.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/loFrame" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/oneImgView" android:src="@drawable/one" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_height="fill_parent"/> <ImageView android:id="@+id/twoImgView" android:src="@drawable/two" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_height="" android:visibility="gone"/> </FrameLayout>
You can switch visability of ImageView
with setVisibility(View.VISIBLE)
(or setVisibility(View.GONE)
).
GridLayout
Android 4.0 brought with it a new layout manager called GridLayout
. As you might expect, it lays out views in a grid pattern of rows and columns, somewhat like TableLayout
. However, it’s easier to use than TableLayout
. With a GridLayout
, you can specify a row and column value for a view, and that’s where it goes in the grid.
This means you don’t need to specify a view for every cell, just those that you want to hold a view.