Android Application Development Cookbook: 93 Recipes for Building Winning Apps

Recipe 2.13 Using TableLayout for View Positioning

Android Versions

Level 1 and above

Permissions

None

Source Code to Download from Wrox.com

UsingTableLayout.zip

The TableLayout groups views into rows and columns. You use the <TableRow> element to designate a row in the table. Each row can contain one or more views. Each view you place within a row forms a cell. The width of each column is determined by the largest width of each cell in that column. This recipe shows how to use the TableLayout.

Solution

Assume you have the following code snippet in the activity_main.xml file, which contains the TableLayout ViewGroup:

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" 
    android:layout_width="match_parent">
    <TableRow> 
        <TextView 
            android:text="User Name:"
            android:width ="120dp" />
        <EditText 
            android:id="@+id/txtUserName" 
            android:width="200dp" />
    </TableRow> 
    <TableRow>
        <TextView 
            android:text="Password:"/>
        <EditText 
            android:id="@+id/txtPassword" 
            android:password="true" />
    </TableRow>
    <TableRow>
        <TextView />
        <CheckBox android:id="@+id/chkRememberPassword"
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:text="Remember Password" />   
    </TableRow>
    <TableRow>
        <Button 
            android:id="@+id/buttonSignIn" 
            android:text="Log In" />
    </TableRow>
</TableLayout>

Figure 2-25 shows the layout of the various views.

Figure 2-25

Note that in this example, there are two columns and four rows in the TableLayout ...