Create a Table Layout in Android

Introduction

 
In this article, I explain the table layout. Actually table layout is nothing but a view as a grid view. In Android, table layout works the same as an HTML table layout. A Table layout divides data into rows and columns, but we define only a row for the table and the column will be automatically created depending on the required fields in the row. You will see the table layout in the output image.
 
Now use the following procedure to learn how to create a table layout and how to use it.
 
Step 1
 
Create a new Android project as "File" -> "New" -> "Android  Application Project" as shown in the following image"
 
newTableLayout.jpg
 
Step 2
 
Now open the XML file "res/layout/activity_main.xml" and update it using the following code:
  1. <TableLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff">  
  6.     <!-- Row 1 with single column -->  
  7.     <TableRow  
  8.         android:layout_height="wrap_content"  
  9.         android:layout_width="fill_parent"  
  10.         android:gravity="center_horizontal">  
  11.         <TextView  
  12.             android:layout_width="match_parent" android:layout_height="wrap_content"  
  13.             android:textSize="18dp" android:text="Table number 21"  android:layout_span="3"  
  14.             android:padding="18dip" android:background="#b0b0b0"  
  15.             android:textColor="#000"/>  
  16.     </TableRow>   
  17.      <!-- Row 2 with 3 columns -->  
  18.     <TableRow  
  19.         android:id="@+id/tableRow1"  
  20.         android:layout_height="wrap_content"  
  21.         android:layout_width="match_parent"  
  22.         android:baselineAligned="true" android:background="#8adec7">  
  23.         <TextView  
  24.             android:id="@+id/TextView04" android:text="UserId"  
  25.             android:layout_weight="1"  
  26.             android:textColor="#000000"  
  27.             android:padding="20dip" android:gravity="center"/>  
  28.         <TextView  
  29.             android:id="@+id/TextView04" android:text="UserName"  
  30.             android:layout_weight="1"  
  31.             android:textColor="#000000"  
  32.             android:padding="20dip" android:gravity="center"/>  
  33.         <TextView  
  34.             android:id="@+id/TextView04" android:text="Mobile no"  
  35.             android:layout_weight="1"  
  36.             android:textColor="#000000"  
  37.             android:padding="20dip" android:gravity="center"/>  
  38.     </TableRow>  
  39.     <!-- Row 3 with 2 columns -->  
  40.     <TableRow  
  41.         android:layout_height="wrap_content"  
  42.         android:layout_width="fill_parent"  
  43.         android:gravity="center_horizontal">  
  44.         <TextView  
  45.             android:id="@+id/TextView04" android:text="1"  
  46.             android:layout_weight="1"  
  47.             android:textColor="#000000"  
  48.             android:padding="20dip" android:gravity="center"/>  
  49.         <TextView  
  50.             android:id="@+id/TextView04" android:text="sajid khan"  
  51.             android:layout_weight="1"  
  52.             android:textColor="#000000"  
  53.             android:padding="20dip" android:gravity="center"/>  
  54.          <TextView  
  55.             android:id="@+id/TextView05" android:text="87118882138"  
  56.             android:layout_weight="1"  
  57.             android:textColor="#000000"  
  58.             android:padding="20dip" android:gravity="center"/>  
  59.     </TableRow>   
  60.      <TableRow  
  61.         android:layout_height="wrap_content"  
  62.         android:layout_width="fill_parent"  
  63.         android:gravity="center_horizontal">  
  64.         <TextView  
  65.             android:id="@+id/TextView04" android:text="2"  
  66.             android:layout_weight="1"  
  67.             android:textColor="#000000"  
  68.             android:padding="20dip" android:gravity="center"/>  
  69.          <TextView  
  70.             android:id="@+id/TextView04" android:text="majid khan"  
  71.             android:layout_weight="1"  
  72.             android:textColor="#000000"  
  73.             android:padding="20dip" android:gravity="center"/>  
  74.          <TextView  
  75.             android:id="@+id/TextView05" android:text="87139487"  
  76.             android:layout_weight="1"  
  77.             android:textColor="#000000"  
  78.             android:padding="20dip" android:gravity="center"/>  
  79.     </TableRow>   
  80.     <ListView  
  81.         android:id="@+id/list_view"  
  82.         android:layout_width="fill_parent"  
  83.         android:layout_height="wrap_content" />  
  84. </TableLayout> 
Step 3
 
Open the Java file "MainActivity.java" and update it with the following code:
  1. package com.example.tablelayout;  
  2. import java.util.ArrayList;  
  3. import java.util.HashMap;  
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.view.Menu;  
  7. import android.widget.ArrayAdapter;  
  8. import android.widget.ListView;  
  9. public class MainActivity extends Activity {  
  10.       private ListView lv;  
  11.        ArrayAdapter<String> adapter;  
  12.        ArrayList<HashMap<String, String>> productList;  
  13.       @Override  
  14.       protected void onCreate(Bundle savedInstanceState) {  
  15.             super.onCreate(savedInstanceState);  
  16.             setContentView(R.layout.activity_main);  
  17.       }  
  18.       @Override  
  19.       public boolean onCreateOptionsMenu(Menu menu) {  
  20.             // Inflate the menu; this adds items to the action bar if it is present.  
  21.             getMenuInflater().inflate(R.menu.main, menu);  
  22.             return true;  
  23.       }  
Step 4
 
Open the "strings.xml" file and update it with your string resources, whatever you want to add with strings.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string name="app_name">TableLayout</string>  
  4.     <string name="action_settings">Settings</string>  
  5.     <string name="hello_world">Hello world!</string>  
  6. </resources> 
Step 5
 
Table Layout:
 
tableLayout.jpg


Similar Articles