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