Friday, 20 January 2017

Android Table Layout

A Table is a collection of data which is arranged in Rows and Column format. Rows and columns can have some title and there can be table header, Which can be table name or something else that can describe which data we are going to show in table.

In the same way we can create table layout in which views are arranged in rows and columns.In Android table layout is not used so much as linear and relative layouts are used because it does not provide that much functionality as provided by these. 

We arrange the views in table layout using TableRow element.When we define a table layout then the parent tag in xml file is TableLayout then we define an element TableRow then we define the views that we want to arrange to create layout for any activity,as much we define view it will define the columns respectively.

A design of Android Table Layout is shown in below image -



Here are some table layout attributes -


Attribute & Description
1
android:id
This is the ID which uniquely identifies the layout.
2
android:collapseColumns
This specifies the zero-based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.
3
android:collapseColumns
The zero-based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5.
4
android:stretchColumns
The zero-based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5.

Below is the example of an Android Table Layout xml file -

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   
   <TableRow
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
  
      <TextView
         android:text="Time"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_column="1" />
   
      <TextClock
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/textClock"
         android:layout_column="2" />
   
   </TableRow>
   
   <TableRow>
 
      <TextView
         android:text="First Name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_column="1" />
   
      <EditText
         android:width="200px"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" />
   </TableRow>
   
   <TableRow>
 
      <TextView
         android:text="Last Name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_column="1" />
   
      <EditText
         android:width="100px"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" />
   </TableRow>
   
   <TableRow
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
  
      <RatingBar
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/ratingBar"
         android:layout_column="2" />
   </TableRow>
   
   <TableRow
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
  
   <TableRow
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
  
      <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Submit"
         android:id="@+id/button"
         android:layout_column="2" />
   </TableRow>

</TableLayout>

Here is its output -





No comments:

Post a Comment