Xamarin - Table Layout: InfoBrother

Table Layout:

Table Layout let us arranges elements in Rows and Columns just like the standard table Layout in HTML using <tr> for tables rows and <td> for Tables columns. In Android, We Use Table Layout to arrange button, textview, and other views in rows and column format.

Declaration:

We use following syntax to declare Table Layout in Android using XML.


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

    <!-- first row of the table layout-->
    <TableRow
        android:id="@+id/row1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <!-- Add elements/columns in the first row-->
        
    </TableRow>

</TableLayout>

We Use TableRow element to build a row in the table. Each row has zero or more cells, and each cell can hold one view object. Table Layout containers do not display border lines for their rows and columns. Following are the commonly used properties specific to Table Layout.

1) Collapse Columns:

In Android, We use this Property to Make Invisible or collapse the columns of the Table Layout. The collapsed columns are the part of table but are Invisible.

» If we set the values 0 (zero), the first column will appear collapsed.
» If we set the values 1 (one), the second column will appear collapsed.

Table Layout - Collapse Columns: infobrother


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:collapseColumns="0">
<!-- collapse the first column of the table row-->
  
  
<!-- first row of the table layout-->
    <TableRow
        android:id="@+id/simpleTableLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light">
      
        <!-- first element of the row that is the 
             part of table but it is invisible-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#008080"
            android:padding="18dip"
            android:text="Columns 1"
            android:textColor="#fff"
            android:textSize="18dp" />
      
        <!-- second element of the row that is 
             shown in the screenshot-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#184757"
            android:padding="18dip"
            android:text="Columns 2"
            android:textColor="#fff"
            android:textSize="18dp" />
    </TableRow>
</TableLayout>

NOTE: The Columns index are started from 0. So, if we set value 0, its mean we select first column.

2) Stretch Columns:

In Android, we use this property to stretch the width of default column. The default width of column is set equal to the width of the widest column, so we Use this property to stretch the columns to take up available free space.

» If We set the value 0 (zero) then the first column is stretched to take up any available space in the row.
» If We set the value (0, 1), then the first and second column will stretched to take up any available space in the row.
» If we set the value (*), then all the columns are stretched to take up the available space.

Table Layout - Stretch Columns: infobrother


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:stretchColumns="0">
<!-- Stretch the first column of the table row-->
  
  
<!-- first row of the table layout-->
    <TableRow
        android:id="@+id/simpleTableLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light">
      
        <!-- first element of the row that is the 
             part of table but it is invisible-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#008080"
            android:padding="18dip"
            android:text="Columns 1"
            android:textColor="#fff"
            android:textSize="18dp" />
      
        <!-- second element of the row that is 
             shown in the screenshot-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#184757"
            android:padding="18dip"
            android:text="Columns 2"
            android:textColor="#fff"
            android:textSize="18dp" />
    </TableRow>
</TableLayout>

3) Shrink Columns:

In Android, we use this property to Shrink or reduce the width of default column. The default width of column is set equal to the width of the widest column, so using this property, the content in the specified columns will word-wraps to reduce their width.

» If we set the value 0(zero), then the first column will Shrinks by word wrapping its content.
» If we set the value (0, 1), then the first and second column will shrinks by word wrapping its content.
» If we set the value (*), then the contents of all columns will word wrapped to shrink their width.

Table Layout - Shrink Columns: infobrother


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*">
<!-- shrink All the column of the layout-->
  
<!-- first row of the table layout-->
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/background_light">
        <TextView
            android:background="#008080"
            android:text="Hi, this is 1st Column"
            android:textColor="#fff"
            android:minWidth="5dp"
            android:textSize="18dp"
            android:padding="10dp" />

        <TextView
            android:background="#184757"
            android:text="Hi, this is 2nd Column"
            android:textColor="#fff"
            android:minWidth="5dp"
            android:textSize="18dp"
            android:padding="10dp" />

        <TextView
            android:background="#008080"
            android:text="Hi, this is 3rd Column"
            android:textColor="#fff"
            android:minWidth="5dp"
            android:textSize="18dp"
            android:padding="10dp" />
    </TableRow>
</TableLayout>

Note!

Learn how to Add corners border to any View in android using xml.

Look at the given Example to know, how we can design the Table in Android using TableLayout.


<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#184757"
    android:orientation="vertical"
    android:stretchColumns="1">
<!-- Stretch second column of Layout.-->

<!-- first row of the table layout-->
    <TableRow
        android:padding="5dip">
        <TextView
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dp"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:text="@string/heading"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </TableRow>

<!-- Second row of the table layout-->
    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:text="@string/text"
            android:textColor="#fff"
            android:textSize="14sp"
            android:textStyle="normal" />
    </TableRow>

<!-- third row of the table layout-->
    <TableRow>
        <TextView
            android:text="From *"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20dp"
            android:textStyle="normal"
            android:padding="10dp"
            android:layout_column="0" />

    <!--Include text border from "borderstyle.xml" file-->
        <EditText
            android:inputType="textEmailAddress"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/borderstyle"
            android:layout_marginRight="5dp"
            android:hint="Enter Your Email Address:"
            android:textColorHint="#184757"
            android:textSize="12dp"
            android:textStyle="italic"
            android:layout_column="1" />
    </TableRow>

<!-- 4th row of the table layout-->
    <TableRow>
        <TextView
            android:text="Name:"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20dp"
            android:textStyle="normal"
            android:padding="10dp"
            android:layout_column="0" />

    <!--Include text border from "borderstyle.xml" file-->
        <EditText
            android:inputType="text"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/borderstyle"
            android:layout_marginRight="5dp"
            android:hint="Enter Your Name:"
            android:textColorHint="#184757"
            android:textSize="12dp"
            android:textStyle="italic"
            android:layout_column="1" />
    </TableRow>

<!-- 5th row of the table layout-->
    <TableRow>
        <TextView
            android:text="Subject:"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20dp"
            android:textStyle="normal"
            android:padding="10dp"
            android:layout_column="0" />

    <!--Include text border from "borderstyle.xml" file-->
        <EditText
            android:inputType="text"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/borderstyle"
            android:layout_marginRight="5dp"
            android:hint="Enter Your Subject:"
            android:textColorHint="#184757"
            android:textSize="12dp"
            android:textStyle="italic"
            android:layout_column="1" />
    </TableRow>

<!-- 6th row of the table layout-->
    <TableRow>
        <TextView
            android:text="Message *"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20dp"
            android:textStyle="normal"
            android:padding="10dp"
            android:layout_column="0" />

    <!--Include text border from "borderstyle.xml" file-->
        <EditText
            android:inputType="text"
            android:layout_height="100dp"
            android:padding="10dp"
            android:background="@drawable/borderstyle"
            android:layout_marginRight="5dp"
            android:hint="Compose Your Message:"
            android:textColorHint="#184757"
            android:textSize="12dp"
            android:textStyle="italic"
            android:layout_column="1" />
    </TableRow>

<!-- 7th row of the table layout-->
    <TableRow
        android:padding="5dip">
        <Button
            android:text="SEND MESSAGE"
            android:id="@+id/button1"
            android:padding="15dp"
            android:gravity="center_horizontal"
            android:background="#008080"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_span="2" />
    </TableRow>
</TableLayout>


<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">Table Layout</string>
  <string name="heading">Got a Problem? Let's us Know</string>
  <string name="text">Your email address will not be Published, Required fields are Marked*</string>
</resources>


using Android.App;
using Android.OS;

namespace XLayout
{
    [Activity(Label = "Table Layout", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
        }
    }
}


<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    android:stretchColumns="1"
    android:background="@drawable/background">
<!--set your background image-->

<!-- first row of the table layout-->
    <TableRow
        android:padding="5dip">
        <TextView
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dp"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:text="@string/heading"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold"
            android:id="textView1" />
    </TableRow>

<!-- Second row of the table layout-->
    <TableRow
        android:padding="5dip">
        <TextView
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:text="@string/text"
            android:textColor="#fff"
            android:textSize="14sp"
            android:textStyle="normal"
            android:id="textView2" />
    </TableRow>

<!-- third row of the table layout-->
    <TableRow
        android:padding="5dip">
        <EditText
            android:inputType="textPersonName"
            android:id="@+id/editText1"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:hint="Name *"
            android:textColorHint="#184757"
            android:textSize="14dp"
            android:textStyle="normal"
            android:padding="15dp"
            android:background="@drawable/borderstyle" />
    </TableRow>

<!-- 4th row of the table layout-->
    <TableRow
        android:padding="5dip">
        <EditText
            android:inputType="textEmailAddress"
            android:id="@+id/editText2"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:hint="Email address *"
            android:textColorHint="#184757"
            android:textSize="14dp"
            android:textStyle="normal"
            android:padding="15dp"
            android:background="@drawable/borderstyle" />
    </TableRow>

<!-- 5th row of the table layout-->
    <TableRow
        android:padding="5dip">
        <EditText
            android:inputType="text"
            android:id="@+id/editText3"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:hint="Subject"
            android:textColorHint="#184757"
            android:textSize="14dp"
            android:textStyle="normal"
            android:padding="15dp"
            android:background="@drawable/borderstyle" />
    </TableRow>

<!-- 6th row of the table layout-->
    <TableRow
        android:padding="5dip">
        <EditText
            android:inputType="text"
            android:id="@+id/editText4"
            android:layout_height="100dp"
            android:layout_span="2"
            android:hint="Message"
            android:textColorHint="#184757"
            android:textSize="14dp"
            android:textStyle="normal"
            android:padding="15dp"
            android:background="@drawable/borderstyle" />
    </TableRow>

<!-- 7th row of the table layout-->
    <TableRow
        android:padding="5dip"
        android:gravity="center">
        <Button
            android:text="SEND MESSAGE"
            android:id="@+id/button1"
            android:padding="15dp"
            android:background="#008080"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" />
    </TableRow>
</TableLayout>


<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">Table Layout</string>
  <string name="heading">Got a Problem? Let's us Know</string>
  <string name="text">Your email address will not be Published, Required fields are Marked*</string>
</resources>


using Android.App;
using Android.OS;

namespace XLayout
{
    [Activity(Label = "Table Layout", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
        }
    }
}

Read More...

» Layout Params (Fill_PARENT, MATCH_PARENT, WRAP_CONTENT) - xml
» Layout_Gravity Attribute - xml

I Tried my Best to Provide you complete Information regarding this topic in very easy and conceptual way. but still if you have any Problem to understand this topic, or do you have any Questions, Feel Free to Ask Question. i'll do my best to Provide you what you need.

Sardar Omar.
InfoBrother

WRITE FOR INFOBROTHER

Advertising

Follow me on Instagram

Table Layout:

Declaration:

Note!

Advertising

READ MORE

Advertisement