Understanding Table Layout in android

Understanding Table Layout in android

In this tutorial, we will cover the topic understanding Table layout in android application development. We have covered all the many different layouts in android so if you are interested in reading any of them, you should follow our android layout tutorials.

So what is Table layout and how can it be used in android application development?

Table layout is one of the numerous android layouts that align its children in rows and column. It is similar to HTML table which also places its content in rows and columns.

The rows in android Table layout are made of an instance of TableRow. The TableRow consists of empty cell or many cells and each cell contain a View control. The ViewGroup can also be in a cell which will in turn contain many other Views.

The Table layout does not produce a visible line around its container or its child Views. It is also important to understand that each row can be empty or contain many cells. Cells can also be spanned like what is obtainable in HTML table.

The width of a column is defined by the row with the widest cell in that column. However, a TableLayout can specify certain columns as shrinkable or stretchable by calling setColumnShrinkable() or setColumnStretchable(). If marked as shrinkable, the column width can be shrunk to fit the table into its parent object. If marked as stretchable, it can expand in width to fit any extra space. The total width of the table is defined by its parent container.

In android Table layout, a column can be both shrinkable and stretchable. This implies that the column will change its size to always use up the available space. A column can also be hidden with the call to setColumnCollapsed(). It is also important to know that the column index is a zero based index.

Table layout can be created in android application development by using the XML layout resource file or programmatically. We are going to exploit these two methods to demonstrate how Table layout can be use.

Table layout like other layouts in android has its own attributes. A list of some of the attributes is listed below.

android:collapseColumns – The zero-based index of the columns to collapse.

android:shrinkColumns – The zero-based index of the columns to shrink.

android:stretchColumns – The zero-based index of the columns to stretch.

With the information we have now about Tablelayout we can go ahead and create a new android project to demonstrate an example of Tablelayout. The project will be a login page that will contain two TextViews and two EditTexts. All the Views will be arranged in rows and columns.

Create a new android project by following the steps listed below.

Go to file menu

Click on New menu

Click on Android Application

Enter Project name: TableLayoutAndroid

Package: com.inducesmile.tablelayoutandroid

Keep other default selections

Continue to click on next button until Finish button is active

Then click on Finish Button

Once you are done with your project, head over to the resource > layout folder and open the file called activity_main.xml. In your IDE the graphical layout view will be open. Click on the TextView in your layout to select it and click on the delete button to delete the text from your layout.

Now right click on your layout and select change layout and change the current layout from Relative layout to Tablelayout.

After you must have done with this your layout code will look more or less like the code shown below.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inducesmile.tablelayoutandroid.MainActivity" >
</TableLayout>

With the basic xml layout in set, we will go ahead and add all the Views in the XML layout resources. If you choose to use the graphical interface of your IDE, drag and drop the views to the layout respectively.

If you are done your code will be similar to the code below. I added margin in other to create space around the Table layout rows. You can copy and paste the code below to your XML layout resource file.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inducesmile.tablelayoutandroid.MainActivity" >

<TableRow
android:layout_margin="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textStyle="bold"
android:text="@string/email"/>

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:width="150dp" />
</TableRow>

<TableRow
android:layout_margin="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/password"
android:textSize="16sp"
android:textStyle="bold"/>

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="150dp"
android:inputType ="textPassword"/>

</TableRow>
<TableRow
android:layout_margin="10dp">
<Button
android:id="@+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login" />
</TableRow>

</TableLayout>

 

We have added the following string value to the string.xml file. The string.xml file looks as shown below

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">TableLayoutAndroid</string>
<string name="action_settings">Settings</string>
<string name="email">Email Address</string>
<string name="password">Password</string>
<string name="login">Login</string>
</resources>

This xml layout will generate a user interface that looks like the image below.

tablelayout

This brings us to the end of this tutorial. You can run your application now. If everything works, your interface will be similar to the image displayed above.

Finally, if you have a question or suggestion kindly use our comment box. You can download the source code for this tutorial below.

Add a Comment