Post
Ask Question

Learn Table Layout in Android

Introduction

 
This article explains TableLayout in Android. Android Studio is used to create the sample application. 
TableLayout arranges its children into row and column. The Table Layout consists of a TableRow object to arrange children in a row.
 
In this, you will first use a TableLayout in your XML file and use Textviews according to your needs. I took five TextViews in this example. First, you will use one TextView inside the first Table Row, three TextViews inside a second Table Row and one TextView inside a third TableRow object.
 
Step 1
 
Create a project like this:
 
Clipboard03.jpg
 
Step 2
 
In this, you will first use a TableLayout in your XML file and use Textviews according to your needs. I took five TextViews in this example. First, you will use one TextView inside the first Table Row, three TextViews inside a second Table Row and one TextView inside the third TableRow object.
 
Create an XML file and write this:
  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="*"  
  6.         android:stretchColumns="*"  
  7.         android:background="#faa">  
  8.     <TableRow  
  9.             android:layout_height="wrap_content"  
  10.             android:layout_width="fill_parent"  
  11.             android:gravity="center_horizontal">  
  12.         <TextView  
  13.                 android:layout_width="match_parent"  
  14.                 android:layout_height="wrap_content"  
  15.                 android:textSize="20dp"  
  16.                 android:text="TextView1"  
  17.                 android:layout_span="3"  
  18.                 android:padding="16dip"  
  19.                 android:background="#0ff"  
  20.                 android:textColor="#000000"/>  
  21.     </TableRow>  
  22.    
  23.     <TableRow  
  24.             android:id="@+id/tableRow1"  
  25.             android:layout_height="wrap_content"  
  26.             android:layout_width="match_parent"  
  27.             >  
  28.         <TextView  
  29.                 android:id="@+id/TextView02"  
  30.                 android:text="TextView2"  
  31.                 android:layout_weight="1"  
  32.                 android:background="#0df"  
  33.                 android:textColor="#000000"  
  34.                 android:padding="28dip"  
  35.                 android:gravity="center"/>  
  36.         <TextView  
  37.                 android:id="@+id/TextView04"  
  38.                 android:text="textView3"  
  39.                 android:layout_weight="1"  
  40.                 android:background="#dff"  
  41.                 android:textColor="#000000"  
  42.                 android:padding="28dip"  
  43.                 android:gravity="center"/>  
  44.         <TextView  
  45.                 android:id="@+id/TextView4"  
  46.                 android:text="TextView4"  
  47.                 android:layout_weight="1"  
  48.                 android:background="#faa"  
  49.                 android:textColor="#000000"  
  50.                 android:padding="27dip"  
  51.                 android:gravity="center"/>  
  52.     </TableRow>  
  53.    
  54.     <TableRow  
  55.             android:layout_height="wrap_content"  
  56.             android:layout_width="fill_parent"  
  57.             android:gravity="center_horizontal">  
  58.         <TextView  
  59.                 android:id="@+id/TextView05"  
  60.                 android:text="Textview5"  
  61.                 android:layout_weight="1"  
  62.                 android:background="#d0d0ff"  
  63.                 android:textColor="#000000"  
  64.                 android:padding="20dip"  
  65.                 android:gravity="center"/>  
  66.    
  67.         <TextView  
  68.                 android:id="@+id/TextView04"  
  69.                 android:text="Row 3 column 2"  
  70.                 android:layout_weight="1"  
  71.                 android:background="#fdadbe"  
  72.                 android:textColor="#000000"  
  73.                 android:padding="20dip"  
  74.                 android:gravity="center"/>  
  75.     </TableRow>  
  76.    
  77. </TableLayout>  
  78. <TableLayout  
  79.         xmlns:android="http://schemas.android.com/apk/res/android"  
  80.         android:layout_width="match_parent"  
  81.         android:layout_height="match_parent"  
  82.         android:shrinkColumns="*"  
  83.         android:stretchColumns="*"  
  84.         android:background="#faa">  
  85.     <TableRow  
  86.             android:layout_height="wrap_content"  
  87.             android:layout_width="fill_parent"  
  88.             android:gravity="center_horizontal">  
  89.         <TextView  
  90.                 android:layout_width="match_parent"  
  91.                 android:layout_height="wrap_content"  
  92.                 android:textSize="20dp"  
  93.                 android:text="TextView1"  
  94.                 android:layout_span="3"  
  95.                 android:padding="16dip"  
  96.                 android:background="#0ff"  
  97.                 android:textColor="#000000"/>  
  98.     </TableRow>  
  99.    
  100.     <TableRow  
  101.             android:id="@+id/tableRow1"  
  102.             android:layout_height="wrap_content"  
  103.             android:layout_width="match_parent"  
  104.             >  
  105.         <TextView  
  106.                 android:id="@+id/TextView02"  
  107.                 android:text="TextView2"  
  108.                 android:layout_weight="1"  
  109.                 android:background="#0df"  
  110.                 android:textColor="#000000"  
  111.                 android:padding="28dip"  
  112.                 android:gravity="center"/>  
  113.         <TextView  
  114.                 android:id="@+id/TextView04"  
  115.                 android:text="textView3"  
  116.                 android:layout_weight="1"  
  117.                 android:background="#dff"  
  118.                 android:textColor="#000000"  
  119.                 android:padding="28dip"  
  120.                 android:gravity="center"/>  
  121.         <TextView  
  122.                 android:id="@+id/TextView4"  
  123.                 android:text="TextView4"  
  124.                 android:layout_weight="1"  
  125.                 android:background="#faa"  
  126.                 android:textColor="#000000"  
  127.                 android:padding="27dip"  
  128.                 android:gravity="center"/>  
  129.     </TableRow>  
  130.    
  131.     <TableRow  
  132.             android:layout_height="wrap_content"  
  133.             android:layout_width="fill_parent"  
  134.             android:gravity="center_horizontal">  
  135.         <TextView  
  136.                 android:id="@+id/TextView05"  
  137.                 android:text="Textview5"  
  138.                 android:layout_weight="1"  
  139.                 android:background="#d0d0ff"  
  140.                 android:textColor="#000000"  
  141.                 android:padding="20dip"  
  142.                 android:gravity="center"/>  
  143.    
  144.         <TextView  
  145.                 android:id="@+id/TextView04"  
  146.                 android:text="Row 3 column 2"  
  147.                 android:layout_weight="1"  
  148.                 android:background="#fdadbe"  
  149.                 android:textColor="#000000"  
  150.                 android:padding="20dip"  
  151.                 android:gravity="center"/>  
  152.     </TableRow>  
  153.    
  154. </TableLayout> 
Step 3
 
Create a Java file and write this:
  1. package com.tablayoutexample;   
  2. import android.os.Bundle;  
  3. import android.app.Activity;  
  4. import android.view.Menu;  
  5.    
  6. public class MainActivit extends Activity {  
  7.    
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.     }  
  13.    
  14.     @Override  
  15.     public boolean onCreateOptionsMenu(Menu menu) {  
  16.         // Inflate the menu; this adds items to the action bar if it is present.  
  17.         getMenuInflater().inflate(R.menu.main, menu);  
  18.         return true;  
  19.     }  
  20.    
  21. } 
Step 4
 
Android Manifest.xml file
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.tablayoutexample"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.    
  7.     <uses-sdk  
  8.         android:minSdkVersion="7"  
  9.         android:targetSdkVersion="16" />  
  10.    
  11.     <application  
  12.         android:allowBackup="true"  
  13.         android:icon="@drawable/ic_launcher"  
  14.         android:label="@string/app_name"  
  15.         android:theme="@style/AppTheme" >  
  16.         <activity  
  17.             android:name="com.tablayoutexample.MainActivit"  
  18.             android:label="@string/app_name" >  
  19.             <intent-filter>  
  20.                 <action android:name="android.intent.action.MAIN" />  
  21.    
  22.                 <category android:name="android.intent.category.LAUNCHER" />  
  23.             </intent-filter>  
  24.         </activity>  
  25.     </application>  
  26.    
  27. </manifest> 
Step 5
 
Clipboard04.jpg


Similar Articles