Android TableLayout Example

 

Android TableLayout positions its child components into : Rows & Columns. Our TableLayout will have as many columns as the row with the maximum cells. We can combine some of the cells of a row using property android:layout_span. Even we can even leave some cells blank. Android TableLayout does not displays border for their rows, columns & cells, if required we need to add border separately. You will see all these things in our current Android TableLayout Example.

Android TableLayout contains a sub-container called “TableRow”. We have to add all our components like TextView, Buttons, Drop-Down,  EditText, etc. inside these Table Rows.

 


  Download Source Code : TableLayout.zip


Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) TableLayout which you might have downloaded from above or you can follow the scripts below by copying it to implement  in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/TableLayout/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

For Drag-&-Drop you can add both TableLayout & TableRow on expanding Layouts menu.

Let us start with adding a Table Layout in our project and then add 5 – TableRows in it. Add TextViews inside these TableRows as per requirement. One thing you will observe over here is that all the TextView will contain strings named after their cell position i.e. Cell ( row, column ).

 

 

1. activity_main.xml : Layout file

<?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="*" > 
    
 
    <!-- Row 1 with 3 columns -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent">
          
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:padding="20dip" 
            android:gravity="center"
            android:background="#99FF00"
            android:text="Cell (1,1)" />
          
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:padding="20dip"
            android:gravity="center"
            android:background="#cac9c9"
            android:text="Cell (1,2)"/>
        
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:padding="20dip"
            android:gravity="center"
            android:background="#99FF00"
            android:text="Cell (1,3)"/>
   
    </TableRow> 


	<!-- Use this to make Table Border since TableLayout dosen't provides it by default -->    
 	<View
        android:layout_height="2dip"
        android:background="#FFFFFF" />    
    
    	
    <!-- Row 2 with 2 cells  (3rd Cell left Blank)-->
    <TableRow
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" >  
        
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:gravity="center"
            android:padding="20dip"
            android:background="#cac9c9"
            android:text="Cell (2,1)"/> />
    
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:gravity="center"
            android:padding="20dip"
            android:background="#99FF00"
            android:text="Cell (2,2)"/> />  
    
    </TableRow>  
    
        
    <!-- Use this to make Table Border since TableLayout dosen't provides it by default -->
 	<View
        android:layout_height="2dip"
        android:background="#FFFFFF" />    
    
 	
    <!-- Row 3 with 2 cells, filling whole row by stretching the 2 cells of the row using layout_weight=1 -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent">

        
		<!--  Removing weight=1 will make the cell smaller   -->        
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:layout_weight="1"					
            android:gravity="center"
            android:padding="20dip" 
            android:background="#cac9c9"
            android:text="Cell (3,1)" />
          
		<!--  Removing weight=1 will make the cell smaller   -->
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="20dip"
            android:gravity="center"
            android:background="#99FF00"
            android:text="Cell (3,2)"/>
        

    </TableRow>    
    
        
    <!-- Use this to make Table Border since TableLayout dosen't provides it by default -->
    <View
        android:layout_height="2dip"
        android:background="#FFFFFF" />    
    
 	
   	<!-- Row 4 with single cell directly in 2nd column -->
    <TableRow 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" >  
        
        <!-- Directly adding cell to the 2nd column using android:layout_column="1"  (here column index starts with 0) -->
        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:padding="20dip"
            android:gravity="center"
            android:background="#cac9c9" 
            android:text="Cell (4,2)" />
<!-- Make sure about one thing that while using layout_column we need to use layout_height="wrap_context"  for our TextView -->
<!-- You might not get auto suggestion of android:layout_column with older updates -->
          
    </TableRow>

    
    <!-- Use this to make Table Border since TableLayout dosen't provides it by default -->
    <View
        android:layout_height="2dip"
        android:background="#FFFFFF" />    
    
 	
   	<!-- Row 5 with single cell occupying all columns -->
    <TableRow 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" >  
        
        <!-- android:layout_span="3"   merges 3 cells for the current row -->
        <TextView 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:layout_span="3"
            android:padding="20dip"
            android:gravity="center"
            android:background="#99FF00" 
            android:text="Cell (5,1)" />
        
    </TableRow>  
    
    
</TableLayout>

Explanation of above Code :

  • Line 2-6  We have declared our TableLayout filling up the whole screen with height-width to fill_parent & it will extend upto Line-157, so everything we add between this will become child of our TableLayout. Line-6 stretchColumns as the name says, it will make our columns broad.
  • Line 10-12 We have declared our 1st TableRow which will extend upto Line-38. Whatever components we want to add like TextView, Buttons, EditText, etc. needs to be placed inside such TableRows. Over here we have added 3-TextViews inside our 1st TableRow.
  • Line 42-44  As TableLayout doesn’t posses borders, we added View with height 2dip which will act as white border for the table. We will repeat this after every TableRow.
  • Line 48-68  We have our 2nd TableRow. This row contains 2 cells with TextView. We have simply left blank space for 3rd cell.
  • Line 78-104 Here comes our 3rd TableRow again containing 2-TextView cells, yet you can see them occupying whole width of the TableLayout. We did this by using layout_weight=1 with both TextViews.
  • Line 114-130  It is our 4th TableRow containing just a single cell with 1-TextView. But we have skipped placing it to 1st column, instead we have placed it in 2nd column by using property android:layout_column=”1″ (Here column index starts with 0, so index-1 is for 2nd Column).
  • Line 140-154 For our 5th TableRow we have merged all 3 cells together using property android:layout_span=”3″ inside our TextView.

 

 

2. MainActivity.java

package com.example.tablelayout;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    
}

 

 

Output :  Android RelativeLayout

Android TableLayout Example

 

Try it yourself :

  • Try adding some more Rows with more than 3 components in each row.
  • Make TextView with larger text Length, over here you will observe that the table will try to make best fit to wrap the content.
  • Add a TableRow with 2 TextViews. And inside our 2nd TextView add property android:layout_span=”2″, this will make 2nd & 3rd cells merged while 1st cell will remain as it is.

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.