• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Table Layout
2parent.title=Hello, Views
3parent.link=index.html
4@jd:body
5
6
7<p>{@link android.widget.TableLayout} is a {@link android.view.ViewGroup} that
8displays child {@link android.view.View} elements in rows and columns.</p>
9
10<ol>
11  <li>Start a new project named <em>HelloTableLayout</em>.</li>
12  <li>Open the <code>res/layout/main.xml</code> file and insert the following:
13<pre>
14&lt;?xml version="1.0" encoding="utf-8"?>
15&lt;TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
16    android:layout_width="fill_parent"
17    android:layout_height="fill_parent"
18    android:stretchColumns="1">
19
20    &lt;TableRow>
21        &lt;TextView
22            android:layout_column="1"
23            android:text="Open..."
24            android:padding="3dip" />
25        &lt;TextView
26            android:text="Ctrl-O"
27            android:gravity="right"
28            android:padding="3dip" />
29    &lt;/TableRow>
30
31    &lt;TableRow>
32        &lt;TextView
33            android:layout_column="1"
34            android:text="Save..."
35            android:padding="3dip" />
36        &lt;TextView
37            android:text="Ctrl-S"
38            android:gravity="right"
39            android:padding="3dip" />
40    &lt;/TableRow>
41
42    &lt;TableRow>
43        &lt;TextView
44            android:layout_column="1"
45            android:text="Save As..."
46            android:padding="3dip" />
47        &lt;TextView
48            android:text="Ctrl-Shift-S"
49            android:gravity="right"
50            android:padding="3dip" />
51    &lt;/TableRow>
52
53    &lt;View
54        android:layout_height="2dip"
55        android:background="#FF909090" />
56
57    &lt;TableRow>
58        &lt;TextView
59            android:text="X"
60            android:padding="3dip" />
61        &lt;TextView
62            android:text="Import..."
63            android:padding="3dip" />
64    &lt;/TableRow>
65
66    &lt;TableRow>
67        &lt;TextView
68            android:text="X"
69            android:padding="3dip" />
70        &lt;TextView
71            android:text="Export..."
72            android:padding="3dip" />
73        &lt;TextView
74            android:text="Ctrl-E"
75            android:gravity="right"
76            android:padding="3dip" />
77    &lt;/TableRow>
78
79    &lt;View
80        android:layout_height="2dip"
81        android:background="#FF909090" />
82
83    &lt;TableRow>
84        &lt;TextView
85            android:layout_column="1"
86            android:text="Quit"
87            android:padding="3dip" />
88    &lt;/TableRow>
89&lt;/TableLayout>
90</pre>
91<p>Notice how this resembles the structure of an HTML table. The {@link android.widget.TableLayout}
92element is like the HTML <code>&lt;table&gt;</code> element; {@link android.widget.TableRow} is like
93a <code>>&lt;tr>&gt;</code> element;
94but for the cells, you can use any kind of {@link android.view.View} element. In this example, a
95{@link android.widget.TextView} is used for each cell. In between some of the rows, there is also a
96basic {@link android.view.View}, which is used to draw a horizontal line.</p>
97
98</li>
99<li>Make sure your <em>HelloTableLayout</em> Activity loads this layout in the
100{@link android.app.Activity#onCreate(Bundle) onCreate()} method:
101<pre>
102public void onCreate(Bundle savedInstanceState) {
103    super.onCreate(savedInstanceState);
104    setContentView(R.layout.main);
105}
106</pre>
107<p>The {@link android.app.Activity#setContentView(int)} method loads the
108layout file for the {@link android.app.Activity}, specified by the resource
109ID &mdash; <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout
110file.</p>
111</li>
112<li>Run the application.</li>
113</ol>
114<p>You should see the following:</p>
115<img src="images/hello-tablelayout.png" width="150px" />
116
117<h3>References</h3>
118<ul>
119  <li>{@link android.widget.TableLayout}</li>
120  <li>{@link android.widget.TableRow}</li>
121  <li>{@link android.widget.TextView}</li>
122</ul>
123
124
125