Cross Platform
Android
iOS
Mac
Test Cloud

Table Layout

<a href= "http://androidapi.xamarin.com/?link=T:Android.Widget.TableLayout" target="_blank">TableLayout</a> is a <a href= "http://androidapi.xamarin.com/?link=T:Android.Views.ViewGroup" target="_blank">ViewGroup</a> that displays child <a href= "http://androidapi.xamarin.com/?link=T:Android.Views.View" target= "_blank">View</a> elements in rows and columns.

  • Start a new project named HelloTableLayout.
  • Open the Resources/Layout/Main.axml file and insert the following:
    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">
    
        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Open..."
                android:padding="3dip"/>
            <TextView
                android:text="Ctrl-O"
                android:gravity="right"
                android:padding="3dip"/>
        </TableRow>
    
        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Save..."
                android:padding="3dip"/>
            <TextView
                android:text="Ctrl-S"
                android:gravity="right"
                android:padding="3dip"/>
        </TableRow>
    
        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Save As..."
                android:padding="3dip"/>
            <TextView
                android:text="Ctrl-Shift-S"
                android:gravity="right"
                android:padding="3dip"/>
        </TableRow>
    
        <View
            android:layout_height="2dip"
            android:background="#FF909090"/>
    
        <TableRow>
            <TextView
                android:text="X"
                android:padding="3dip"/>
            <TextView
                android:text="Import..."
                android:padding="3dip"/>
        </TableRow>
    
        <TableRow>
            <TextView
                android:text="X"
                android:padding="3dip"/>
            <TextView
                android:text="Export..."
                android:padding="3dip"/>
            <TextView
                android:text="Ctrl-E"
                android:gravity="right"
                android:padding="3dip"/>
        </TableRow>
    
        <View
            android:layout_height="2dip"
            android:background="#FF909090"/>
    
        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Quit"
                android:padding="3dip"/>
        </TableRow>
    </TableLayout>

    Notice how this resembles the structure of an HTML table. The <a href= "http://androidapi.xamarin.com/?link=T:Android.Widget.TableLayout" target="_blank">TableLayout</a> element is like the HTML <table> element; <a href= "http://androidapi.xamarin.com/?link=T:Android.Widget.TableRow" target="_blank">TableRow</a> is like a <tr> element; but for the cells, you can use any kind of <a href= "http://androidapi.xamarin.com/?link=T:Android.Views.View" target="_blank">View</a> element. In this example, a <a href="http://androidapi.xamarin.com/?link=T:Android.Widget.TextView" target="_blank">TextView</a> is used for each cell. In between some of the rows, there is also a basic <a href= "http://androidapi.xamarin.com/?link=T:Android.Views.View" target="_blank">View</a>, which is used to draw a horizontal line.

  • Make sure your HelloTableLayout Activity loads this layout in the <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.App.Activity.OnCreate%28Android.OS.Bundle%29" target="_blank">OnCreate()</a> method:
    protected override void OnCreate (Bundle savedInstanceState)
    {
        base.OnCreate (savedInstanceState);
        SetContentView (Resource.Layout.Main);
    }

    The <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.App.Activity.SetContentView(System.Int32)" target="_blank">SetContentView(int)</a> method loads the layout file for the <a href= "http://androidapi.xamarin.com/?link=T:Android.App.Activity" target="_blank">Activity</a>, specified by the resource ID — Resource.Layout.Main refers to the Resources/Layout/Main.axml layout file.

  • Run the application.

You should see the following:

References

  • <a href= "http://androidapi.xamarin.com/?link=T:Android.Widget.TableLayout" target="_blank">TableLayout</a>
  • <a href= "http://androidapi.xamarin.com/?link=T:Android.Widget.TableRow" target="_blank">TableRow</a>
  • <a href= "http://androidapi.xamarin.com/?link=T:Android.Widget.TextView" target="_blank">TextView</a>

 

Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License . This tutorial is based on the Android Table Layout tutorial .