Wednesday, June 29, 2011

How to programmatically add cells (Views) and rows in TableLayout

 Following are the steps for programmatically adding rows in a TableLayout:

1. Manually include a TableLayout in your main.xml file with an id, say, "TableLayout01". Obtain a reference to the TableLayout as:
       
    table = (TableLayout) findViewById(R.id.TableLayout01); 

Note: Ensure to define the variable "table" outside onCreate() inside the class as: TableLayout table;


 2. Create a new TableRow:

  TableRow row = new TableRow(this);

Note: In this example, only one row is being added for illustration purpose. You can use a for loop to create several rows.

3.  Write this loop inside onCreate or other suitable method of your source file to add, say, 10 cells containing TextViews in the row:

        for(int i=0; i<10; i++)
        {
            // create a new TextView        
            TextView t = new TextView(this);        
            t.setText(i+"."); //Set to any meaningful text
            t.setBackgroundColor(Color.DKGRAY);
            row.addView(t); //Attach TextView to its parent (row)

            //Warning: do not call t.setLayoutParams(params)
            //before attaching the view to the parent, 
            //else null reference will result
            //Use the following lines only if special formatting
            //as shown below is needed. If not, skip.
            //
            TableRow.LayoutParams params = 
                 (TableRow.LayoutParams)t.getLayoutParams();
            params.column= i; //place at ith columns.
            //Skip above line if being placed side by side
            params.span = 1; //span these many columns, 
            //i.e merge these many cells. Skip if not needed
            params.setMargins(2,2,2,2); //To "draw" margins
            //around (outside) the TextView, skip if not needed
            params.width = TableRow.LayoutParams.FILL_PARENT;
            //Set width as needed (Important: this and the
            //.height below is for layout of "text" inside 
            //the TextView, not for layout of TextView' by its
            //parent)
            params.height = TableRow.LayoutParams.WRAP_CONTENT;
            t.setPadding(2, 2, 2, 2); 
            //Skip padding (space around text) above if not
            //needed
            t.setLayoutParams(params); // causes layout update. 
            //Skip above if no special setting is needed
                 
        } //...Here our row is all complete with 10 TextViews
       
        //Next add the new row to the table
        table.addView(row,
                new TableLayout.LayoutParams
                (LayoutParams.WRAP_CONTENT, 
                LayoutParams.WRAP_CONTENT));

5 comments:

  1. This is a good tuto, but I have a question.

    If I want to add 2 rows for example, I use another for loop and that works.

    But if in this loop I want to add 20 rows, I have an error.

    Where does the issue come from ?

    ReplyDelete
  2. To add another input, I have the same issue if I use the same code as yours but with a loop that goes from 0 to 50.

    Where is the issue ? :(

    ReplyDelete
  3. Thank you so much! Especially for warning about setLayoutParams.

    ReplyDelete
  4. This doesn't work, well at least for me. the line "TableRow row = new TableRow(this);" When I try to compile with this line it says the OnClickListener is undefined. Wish the full code files were here for download.

    ReplyDelete

Please do not hesitate to leave your comments.