Android TableLayout Example

Andtoid TableLayout created using xml
and
java code

TableLayout in android is a layout where children are arranged in columns and rows. This layout not provided borders in our table rows, cells and even in columns. So, we have to create for our own.

Now we are going to :

1. Create TableLayout using xml.
2. Create TableLayout programmatically or using java code.
3. Use stretch attribute. 
4. Use shrink atrribute.

Let's start..

Here is the tablelayout.xml
file location : res/layout 

<?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" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <TextView android:text="A1"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="B1"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="C1"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="D1"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
    </TableRow>
 <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <TextView android:text="A2"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="B2"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="C2"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="D2"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
    </TableRow>
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <TextView android:text="A3"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
        <TextView android:text="B3"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"
            android:layout_span="2"/>   <!-- HERE IS THE SPAN-->
        <TextView android:text="C3"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
         <TextView android:text="D3"
            android:background="#ffffff"
            android:padding="20px"
            android:layout_marginRight="2px"
            android:layout_marginTop="2px"/>
    </TableRow>
</TableLayout>

Here our code to load our TableLayout in out interface.

TableLayout tableLayoutFromXml = (TableLayout) LayoutInflater.from(this).inflate(R.layout.tablelayout, null);  

Here our code to create TableLayout programmatically or using java code.

/** 
 * Create TableLayout programmatically 
 * @return 
 */  
TableLayout tableLayout(){  
   
 // CREATE TABLE  
 TableLayout tableLayout = new TableLayout(this);  
   
 for(int x = 0 ; x < 3 ; x ++){  
    
  // CREATE TABLE ROW  
  TableRow tableRow = new TableRow(this);  
    
  // CREATE PARAM FOR MARGINING  
  TableRow.LayoutParams aParams = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);  
  aParams.topMargin = 2;  
  aParams.rightMargin = 2;  
    
  TableRow.LayoutParams bParams = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);  
  bParams.topMargin = 2;  
  bParams.rightMargin = 2;  
    
  // SET THE SPAN IF x == 2  
  bParams.span = x==2 ? 2 : 1;  
    
  TableRow.LayoutParams cParams = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);  
  cParams.topMargin = 2;  
  cParams.rightMargin = 2;  
    
  TableRow.LayoutParams dParams = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);  
  dParams.topMargin = 2;  
  dParams.rightMargin = 2;  
    
    
  // CREATE TEXTVIEW  
    
  TextView a = new TextView(this);  
  TextView b = new TextView(this);  
  TextView c = new TextView(this);  
  TextView d = new TextView(this);  
    
  // SET PARAMS  
    
  a.setLayoutParams(aParams);  
  b.setLayoutParams(bParams);  
  c.setLayoutParams(cParams);  
  d.setLayoutParams(dParams);  
    
  // SET BACKGROUND COLOR  
    
  a.setBackgroundColor(Color.WHITE);  
  b.setBackgroundColor(Color.WHITE);  
  c.setBackgroundColor(Color.WHITE);  
  d.setBackgroundColor(Color.WHITE);  
    
  // SET PADDING  
    
  a.setPadding(20, 20, 20, 20);  
  b.setPadding(20, 20, 20, 20);  
  c.setPadding(20, 20, 20, 20);  
  d.setPadding(20, 20, 20, 20);  
    
  // SET TEXTVIEW TEXT  
    
  a.setText("A"+ (x+1));  
  b.setText("B"+ (x+1));  
  c.setText("C"+ (x+1));  
  d.setText("D"+ (x+1));  
    
  // ADD TEXTVIEW TO TABLEROW  
    
  tableRow.addView(a);  
  tableRow.addView(b);  
  tableRow.addView(c);  
  tableRow.addView(d);  
    
  // ADD TABLEROW TO TABLELAYOUT  
    
  tableLayout.addView(tableRow);  
 }  
   
  
 return tableLayout;  
}  

Sometimes, adding elements in TableLayout is not enough. We want our design look unique. So, we have to customize or just simple aligned the components.

As we see the image above, the children are just in right portion of our TableLayout. Now we are going to stretch  the cell " B " to occupy the remaining available space of our TableLayout.
To do that here our code.

 /** 
 * with stretch element 
 * @return 
 */  
TableLayout elementStretch(){  
 // OUR TABLELAYOUT  
 TableLayout table = new TableLayout(this);  
   
 // STRETCH OUT SECOND COLUMN  
 table.setColumnStretchable(1, true);  
   
   
 // OUR TABLEROW  
 TableRow tableRow = new TableRow(this);  
   
 // OUT ELEMENT  
 TextView a = new TextView(this);  
 TextView b = new TextView(this);  
   
 // SET BACKGROUND COLOR TO OUT ELEMENT SO THAT IT IS VISIBLE  
   
 a.setBackgroundColor(Color.GREEN);  
 b.setBackgroundColor(Color.WHITE);  
   
 // SET TEXT  
 a.setText("A");  
 b.setText("B");  
   
 // SET PADDING  
    
 a.setPadding(20, 20, 20, 20);  
 b.setPadding(20, 20, 20, 20);  
   
 // ADD ELEMENT TO OUR TABLEROW  
   
 tableRow.addView(a);  
 tableRow.addView(b);  
   
 // ADD OUR TABLEROW TO TABLE  
   
 table.addView(tableRow);  
 return table;  
}  

Here is the image output of the code above.

As we can see the cell " B " stretch to match the parent width.

What if the text in our cell is so long and not fit to device screen width?
What it look like?
Here is the answer.

As we notice the other text or letters are not visible. So, we have to automatically display the other text below.
Here is our code to auto wrap the text.

/** 
* With element that has long text 
* @return 
*/  
TableLayout withLongText(){  
 // OUR TABLELAYOUT  
   
 TableLayout table = new TableLayout(this);  
   
 // SET SHRINKABLE OUR SECOND COLUMN  
   
 table.setColumnShrinkable(1, true);  
  
 // OUR FIRST TABLEROW  
   
 TableRow tableRow1 = new TableRow(this);  
   
 // CREATE PARAMS  
   
 TableRow.LayoutParams params = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);  
   
 // OUT ELEMENT  
   
 TextView a1 = new TextView(this);  
 TextView b1 = new TextView(this);  
   
 // SET BACKGROUND COLOR TO OUT ELEMENT SO THAT IT IS VISIBLE  
   
 a1.setBackgroundColor(Color.GREEN);  
 b1.setBackgroundColor(Color.WHITE);  
   
 // SET PARAMS  
   
 a1.setLayoutParams(params);  
 b1.setLayoutParams(params);  
   
   
 // SET TEXT  
 a1.setText("A");  
 b1.setText("THIS IS THE LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG TEXT");  
   
 // SET PADDING  
    
 a1.setPadding(20, 20, 20, 20);  
 b1.setPadding(20, 20, 20, 20);  
   
 // ADD ELEMENT TO OUR TABLEROW  
   
 tableRow1.addView(a1);  
 tableRow1.addView(b1);  
   
   
 // OUR SECONT TABLEROW  
 TableRow tableRow2 = new TableRow(this);  
   
 // OUT ELEMENT  
 TextView a2 = new TextView(this);  
 TextView b2 = new TextView(this);  
   
 // SET BACKGROUND COLOR TO OUT ELEMENT SO THAT IT IS VISIBLE  
   
 a2.setBackgroundColor(Color.GREEN);  
 b2.setBackgroundColor(Color.WHITE);  
   
 // SET TEXT  
   
 a2.setText("A");  
 b2.setText("B");  
   
 // SET PADDING  
    
 a2.setPadding(20, 20, 20, 20);  
 b2.setPadding(20, 20, 20, 20);  
   
 // ADD ELEMENT TO OUR TABLEROW  
   
 tableRow2.addView(a2);  
 tableRow2.addView(b2);  
   
 // THIS VIEW IS JUST A BOUDARY  
 View view = new View(this);  
 view.setLayoutParams(new TableRow.LayoutParams(LayoutParams.MATCH_PARENT,2));  
   
 // ADD OUR TABLEROW TO TABLE  
 table.addView(tableRow1);  
 table.addView(view);  
 table.addView(tableRow2);  
 return table;  
}  

And finally here is the output.

Download Source Code

Happy coding everyone !!!