Sunday, December 2, 2012

Android beginner tutorial: Part 8 - TableLayout container

Today we'll learn about the TableLayout container.

The TableLayout layout positions all of its children in a grid. The data is stored in rows and columns, similarly to how tables are defined in html.

Change our existing layout xml code the way the root node is TableLayout. Delete the "orientation" attribute. Leave layout_width and layout_height of the TableLayout set to match_parent.

Inside the TableLayout, for each row we want to add we need to add a TableRow node, inside which we add children to create columns.

We'll set layout_height of each row to wrap_content, and layout_width to fill_parent. We'll also set the gravity attribute to "center". The gravity attribute aligns the object relative to its parent. In this case, we make sure the row stays in the center of its parent - the TableLayout container, which has the width and height of the screen.

There will be 3 rows in total. In each row we'll add 3 buttons, set their layout_height values to wrap_content and layout_width to 20pt. Label the buttons 1-9.

In the end we get this code:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TableRow 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center"
        >
    <Button 
        android:text="1"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="2"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="3"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    </TableRow>
    <TableRow 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center"
        >
    <Button 
        android:text="4"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="5"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="6"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    </TableRow>
    <TableRow 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center"
        >
    <Button 
        android:text="7"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="8"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="9"
        android:layout_width="20pt"
        android:layout_height="wrap_content"/>
    </TableRow>
    
</TableLayout>

The results are:



That's all there is to it related to TableLayouts. They are not used very often, mostly when displaying table data. In other cases combinations of LinearLayouts is more suitable.

Thanks for reading!

No comments:

Post a Comment