grid.jd revision e295205ea29bbae0b1fc05970eff265f7d72651b 
1page.title=Table
2parent.title=Layouts
3parent.link=layout-objects.html
4@jd:body
5
6<div id="qv-wrapper">
7<div id="qv">
8<h2>In this document</h2>
9  <ol>
10    <li><a href="#example">Example</a></li>
11  </ol>
12  <h2>Key classes</h2>
13  <ol>
14  <li>{@link android.widget.TableLayout}</li>
15  <li>{@link android.widget.TableRow}</li>
16  <li>{@link android.widget.TextView}</li>
17  </ol>
18</div>
19</div>
20<p>{@link android.widget.TableLayout} is a {@link android.view.ViewGroup} that
21displays child {@link android.view.View} elements in rows and columns.</p>
22
23
24<img src="{@docRoot}images/ui/gridlayout.png" alt="" />
25
26<p>{@link android.widget.TableLayout} positions its children into rows
27    and columns. TableLayout containers do not display border lines for their rows, columns,
28    or cells. The table will have as many columns as the row with the most cells. A table can leave
29cells empty, but cells cannot span columns, as they can in HTML.</p>
30<p>{@link android.widget.TableRow} objects are the child views of a TableLayout
31(each TableRow defines a single row in the table).
32Each row has zero or more cells, each of which is defined by any kind of other View. So, the cells of a row may be
33composed of a variety of View objects, like ImageView or TextView objects.
34A cell may also be a ViewGroup object (for example, you can nest another TableLayout as a cell).</p>
35<p>The following sample layout has two rows and two cells in each. The accompanying screenshot shows the 
36result, with cell borders displayed as dotted lines (added for visual effect). </p>
37
38<table class="columns">
39    <tr>
40        <td>
41        <pre>
42&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
43&lt;TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
44    android:layout_width="match_parent"
45    android:layout_height="match_parent"
46    android:stretchColumns="1">
47    &lt;TableRow>
48        &lt;TextView
49            android:text="@string/table_layout_4_open"
50            android:padding="3dip" />
51        &lt;TextView
52            android:text="@string/table_layout_4_open_shortcut"
53            android:gravity="right"
54            android:padding="3dip" />
55    &lt;/TableRow>
56
57    &lt;TableRow>
58        &lt;TextView
59            android:text="@string/table_layout_4_save"
60            android:padding="3dip" />
61        &lt;TextView
62            android:text="@string/table_layout_4_save_shortcut"
63            android:gravity="right"
64            android:padding="3dip" />
65    &lt;/TableRow>
66&lt;/TableLayout>
67</pre></td>
68        <td><img src="{@docRoot}images/table_layout.png" alt="" style="margin:0" /></td>
69    </tr>
70</table>
71
72<p>Columns can be hidden, marked to stretch and fill the available screen space,
73    or can be marked as shrinkable to force the column to shrink until the table
74    fits the screen. See the {@link android.widget.TableLayout TableLayout reference} 
75documentation for more details. </p>
76
77
78<h2 id="example">Example</h2>
79<ol>
80  <li>Start a new project named <em>HelloTableLayout</em>.</li>
81  <li>Open the <code>res/layout/main.xml</code> file and insert the following:
82<pre>
83&lt;?xml version="1.0" encoding="utf-8"?>
84&lt;TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
85    android:layout_width="match_parent"
86    android:layout_height="match_parent"
87    android:stretchColumns="1">
88
89    &lt;TableRow>
90        &lt;TextView
91            android:layout_column="1"
92            android:text="Open..."
93            android:padding="3dip" />
94        &lt;TextView
95            android:text="Ctrl-O"
96            android:gravity="right"
97            android:padding="3dip" />
98    &lt;/TableRow>
99
100    &lt;TableRow>
101        &lt;TextView
102            android:layout_column="1"
103            android:text="Save..."
104            android:padding="3dip" />
105        &lt;TextView
106            android:text="Ctrl-S"
107            android:gravity="right"
108            android:padding="3dip" />
109    &lt;/TableRow>
110
111    &lt;TableRow>
112        &lt;TextView
113            android:layout_column="1"
114            android:text="Save As..."
115            android:padding="3dip" />
116        &lt;TextView
117            android:text="Ctrl-Shift-S"
118            android:gravity="right"
119            android:padding="3dip" />
120    &lt;/TableRow>
121
122    &lt;View
123        android:layout_height="2dip"
124        android:background="#FF909090" />
125
126    &lt;TableRow>
127        &lt;TextView
128            android:text="X"
129            android:padding="3dip" />
130        &lt;TextView
131            android:text="Import..."
132            android:padding="3dip" />
133    &lt;/TableRow>
134
135    &lt;TableRow>
136        &lt;TextView
137            android:text="X"
138            android:padding="3dip" />
139        &lt;TextView
140            android:text="Export..."
141            android:padding="3dip" />
142        &lt;TextView
143            android:text="Ctrl-E"
144            android:gravity="right"
145            android:padding="3dip" />
146    &lt;/TableRow>
147
148    &lt;View
149        android:layout_height="2dip"
150        android:background="#FF909090" />
151
152    &lt;TableRow>
153        &lt;TextView
154            android:layout_column="1"
155            android:text="Quit"
156            android:padding="3dip" />
157    &lt;/TableRow>
158&lt;/TableLayout>
159</pre>
160<p>Notice how this resembles the structure of an HTML table. The {@link android.widget.TableLayout}
161element is like the HTML <code>&lt;table&gt;</code> element; {@link android.widget.TableRow} is like
162a <code>>&lt;tr>&gt;</code> element;
163but for the cells, you can use any kind of {@link android.view.View} element. In this example, a
164{@link android.widget.TextView} is used for each cell. In between some of the rows, there is also a
165basic {@link android.view.View}, which is used to draw a horizontal line.</p>
166
167</li>
168<li>Make sure your <em>HelloTableLayout</em> Activity loads this layout in the
169{@link android.app.Activity#onCreate(Bundle) onCreate()} method:
170<pre>
171public void onCreate(Bundle savedInstanceState) {
172    super.onCreate(savedInstanceState);
173    setContentView(R.layout.main);
174}
175</pre>
176<p>The {@link android.app.Activity#setContentView(int)} method loads the
177layout file for the {@link android.app.Activity}, specified by the resource
178ID &mdash; <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout
179file.</p>
180</li>
181<li>Run the application.</li>
182</ol>
183<p>You should see the following:</p>
184<img src="images/hello-tablelayout.png" width="150px" />
185
186
187
188