docs/html/guide/topics/views/layout.jd

page.title=Common Layout Objects
@jd:body

<p>The sections below describe some of the more common types of layout objects you'll be likely to use in your applications. Like other layouts, they are subclasses of {@link android.view.ViewGroup ViewGroup}.</p>

<h2>FrameLayout<a name="framelayout" id="framelayout"></a></h2>

<p>{@link android.widget.FrameLayout FrameLayout} is the simplest layout
object. It is intended as a blank reserved space on your screen that you can
later fill with a single object &mdash; for example, a picture that you'll swap out.
All child elements are pinned to the top left corner of the screen; you cannot
specify a location for a child of a {@link android.widget.FrameLayout
FrameLayout}. Later children will simply be drawn over earlier objects,
partially or totally obscuring them (unless the newer object is transparent).
</p>

<h2>LinearLayout<a name="linearlayout" id="linearlayout"></a></h2>

<p>A {@link android.widget.LinearLayout LinearLayout} aligns all children in a
single direction &mdash; vertically or horizontally, depending on what property you
set on the {@link android.widget.LinearLayout LinearLayout}. All children are
stacked one after the other, so a vertical list will only have one child per
row, no matter how wide they are, and a horizontal list will only be one row
high (the height of the tallest child, plus padding). {@link
android.widget.LinearLayout LinearLayout} respects margins between children,
and also <em>gravity</em> (right, center, or left alignment of a child). </p>

<p>{@link android.widget.LinearLayout LinearLayout} also supports assigning a
<em>weight</em> to individual children. This value allows children to expand
to fill any remaining space on a screen. This prevents a list of small objects
from being bunched to one end of a large screen, allowing them to expand to
fill the space. Children specify a weight value, and any remaining space is
assigned to children in the proportion of their declared weight. Default
weight is zero. So, for example, if there are three text boxes, and two of
them declare a weight of 1, two of them will expand equally to fill the
remaining space, and the third will not grow any additional amount.</p>

<div class="sidebox">
<p><strong>Tip</strong>: To create a proportionate size
layout on the screen, create a container object that is fill_parent, assign
the children heights or widths of zero, and then assign relative weight values
to each child, depending on what proportion of the screen each should
take.</p>
</div>

<p>The following two forms represent a {@link android.widget.LinearLayout LinearLayout} with a set of elements: a
button, some labels, some text boxes. Both have padding values to adjust the
padding nicely. The text boxes have their width set to <code>FILL_PARENT</code>; other
elements are set to <code>WRAP_CONTENT</code>. The gravity, by default, is left. The form
on the left has weight values unset (0 by default); the form on the right has
the comments text box weight set to 1. If the Name textbox had also been set
to 1, the Name and Comments text boxes would be the same height. </p>

<p>
    <img src="{@docRoot}images/linearlayout.png" alt="Linear layout with
weight attribute." width="421" height="348" />
</p>

<p>Within a horizontal {@link android.widget.LinearLayout LinearLayout}, items are aligned by the position of
their text base line (the first line of the first list element &mdash; topmost or
leftmost &mdash; is considered the reference line). This is so that people scanning
elements in a form shouldn't have to jump up and down to read element text in
neighboring elements. This can be turned off by setting
<code>android:baselineAligned=&quot;false&quot;</code> in the layout XML. </p>

<h2>TableLayout<a name="tablelayout" id="tablelayout"></a></h2>

<p>{@link android.widget.TableLayout TableLayout} positions its children into rows
    and columns. A TableLayout consists of a number of TableRow objects,
    each defining a row (actually, you can have other children, which will be explained
    below). TableLayout containers do not display border lines for their rows, columns,
    or cells. Each row has zero or more cells; each cell can hold one View object.
    The table has as many columns as the row with the most cells. A table can leave
cells empty. Cells cannot span columns, as they can in HTML. The following image
    shows a table layout, with the invisible cell borders displayed as dotted lines. </p>
<p><img src="{@docRoot}images/table_layout.png" alt="TableLayout example" width="499" height="348" /></p>
<p>Columns can be hidden, can be marked to stretch to fill available screen space,
    or can be marked as shrinkable to force the column to shrink until the table
    fits the screen. See the reference documentation for this class for more details. </p>
<h2>AbsoluteLayout<a name="absolutelayout" id="absolutelayout"></a></h2>
<p>{@link android.widget.AbsoluteLayout AbsoluteLayout} enables children to specify
    exact x/y coordinates to display on the screen, where (0,0) is the upper left
    corner, and values increase as you move down or to the right. Margins are not
    supported, and overlapping elements are allowed (although not recommended). We
    generally recommend against using AbsoluteLayout unless you have good reasons
    to use it, because it is fairly rigid and does not work well with different device
    displays. </p>
<h2>RelativeLayout<a name="relativelayout" id="relativelayout"></a></h2>
<p>{@link android.widget.RelativeLayout RelativeLayout} lets children specify their
    position relative to each other (specified by ID), or to the parent. So you can
    align two elements by right border, or make one below another, or centered in
    the screen. Elements are rendered in the order given, so if the first element
    is centered in the screen, other elements aligning themselves to that element
    will be aligned relative to screen center. If using XML to specify this layout
    (as described later), a referenced element must be listed before you refer to
    it. </p>
<p>Here is an example relative layout with the visible and invisible elements outlined.
    The root screen layout object is a RelativeLayout object. </p>
<p><img src="{@docRoot}images/designing_ui_relative_layout.png" alt="RelativeLayout screen with elements highlighted." width="692" height="440" /></p>
<p>This diagram shows the class names of the screen elements, followed by a list
    of the properties of each. Some of these properties are supported directly by
    the element, and some are supported by its LayoutParams member (subclass RelativeLayout
    for all the elements in this screen, because all elements are children of a RelativeLayout
    parent object). The RelativeLayout parameters are width, height, below, alignTop,
    toLeft, padding, and marginLeft. Note that some of these parameters support values
    relative to other children &mdash; hence the name RelativeLayout. These include the
    toLeft, alignTop, and below properties, which indicate the object to the left,
    top, and below respectively. </p>
<h2>Summary of Important View Groups<a name="viewgroupsummary" id="viewgroupsummary"></a></h2>
<p>These objects all hold child UI elements. Some provide visible UI, and others
    only handle child layout.  </p>
<table width="100%" border="1">
    <tr>
        <th scope="col">Class</th>
        <th scope="col">Description</th>
    </tr>
    <tr>
        <td>{@link android.widget.AbsoluteLayout AbsoluteLayout}<br /></td>
        <td>Enables you to specify the location of child objects relative to the
            parent in exact measurements (for example, pixels). </td>
    </tr>
    <tr>
        <td>{@link android.widget.FrameLayout FrameLayout}</td>
        <td>Layout that acts as a view frame to display
            a single object. </td>
    </tr>
    <tr>
        <td>{@link android.widget.Gallery Gallery} </td>
        <td>A horizontal scrolling display of images, from a bound list. </td>
    </tr>
    <tr>
        <td>{@link android.widget.GridView GridView} </td>
        <td>Displays a scrolling grid of m columns and n rows.</td>
    </tr>
    <tr>
        <td>{@link android.widget.LinearLayout LinearLayout} </td>
        <td>A layout that organizes its children into a single horizontal or vertical
            row. It creates a scrollbar if the length of the window exceeds the length
            of the screen. </td>
    </tr>
    <tr>
        <td>{@link android.widget.ListView ListView} </td>
        <td>Displays a scrolling single column list. </td>
    </tr>
    <tr>
        <td>{@link android.widget.RelativeLayout RelativeLayout} </td>
        <td>Enables you to specify the location of child objects relative to each
            other (child A to the left of child B) or to the parent (aligned to the
            top of the parent). </td>
    </tr>
    <tr>
        <td>{@link android.widget.ScrollView ScrollView} </td>
        <td>A vertically scrolling column of elements. </td>
    </tr>
    <tr>
        <td>{@link android.widget.Spinner Spinner} </td>
        <td>Displays a single item at a time from a bound list, inside a one-row
            textbox. Rather like a one-row listbox that can scroll either horizontally
            or vertically. </td>
    </tr>
    <tr>
        <td>{@link android.view.SurfaceView SurfaceView} </td>
        <td>Provides direct access to a dedicated drawing surface. It can hold child
            views layered on top of the surface, but is intended for applications
            that need to draw pixels, rather than using widgets. </td>
    </tr>
    <tr>
        <td>{@link android.widget.TabHost TabHost} </td>
        <td>Provides a tab selection list that monitors clicks and enables the application
            to change the screen whenever a tab is clicked. </td>
    </tr>
	<tr>
        <td>{@link android.widget.TableLayout TableLayout} </td>
        <td>A tabular layout with an arbitrary number of rows and columns, each cell
            holding the widget of your choice. The rows resize to fit the largest
            column. The cell borders are not
            visible. </td>
    </tr>
    <tr>
        <td>{@link android.widget.ViewFlipper ViewFlipper} </td>
        <td>A list that displays one item at a time, inside a one-row textbox. It
            can be set to swap items at timed intervals, like a slide show. </td>
    </tr>
    <tr>
        <td>{@link android.widget.ViewSwitcher ViewSwitcher} </td>
        <td>Same as ViewFlipper. </td>
    </tr>
</table>