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

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

 

 

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.