How do I inflate single cells in a TableLayout?

Question

I want to inflate single cells of a TableLayout:

The information I want to put in each cell has a fixed size
I am using Adroid 2.2
The table should fill up in the following way:

Like this:

 ___ ___
| 1 | 2 |
|---+---|
| 3 | 4 |
|---+---|
| 5 ...
... and so on

I know how to inflate rows of a TableLayout but not how to address single cells for inflating. Is it even possible? A work around would be to use two separate LinearLayouts next to each other.

Also:

Can I dynamically change the number of collumns? My app should run only on two devices: The 10.1 inch Galaxy Tab and its emulator (has a smaller screen). So on the real device I maybe should use three columns. I want the table to fill the whole screen width and not to be glued to the left side. But I have no idea how to do that with the LinearLayout work around.

I don't see where you encounter problems. Inflating into specific cells is easy, you just have to know the position where to put the inflated view. — user, Jun 18 '12 at 19:40
I know how to add an inflated view as a row to the table, but not how to add a single cell. — TabJohn, Jun 19 '12 at 08:29

score 0 · Accepted Answer · answered Jun 19 '12 at 09:16

Hope this is what you ask:

I want to inflate single cells of a TableLayout in Android.

Suppose you have this layout file containing a TableLayout:

<TableLayout
        android:id="@+id/tbl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </TableRow>

</TableLayout>

Now assume that you want to add 2 cells, one in the first row(second position) and one in the second row on the first position(a diagonal). This is how you would do it:

    TableLayout tl = (TableLayout) findViewById(R.id.tbl);
    TableRow tr1 = (TableRow) findViewById(R.id.tableRow1);
    TableRow tr2 = (TableRow) findViewById(R.id.tableRow2);
    View cell1 = new View(this); // here you could inflate a layout instead
                                    // of this simple View item
    TableRow.LayoutParams trlp1 = new TableRow.LayoutParams(200, 200);
    trlp1.column = 1; // the column count is 0 based
    cell1.setLayoutParams(trlp1);
    cell1.setBackgroundColor(Color.RED);
    tr1.addView(cell1);

    View cell2 = new View(this);
    TableRow.LayoutParams trlp2 = new TableRow.LayoutParams(200, 200);
    trlp2.column = 0;
    cell2.setLayoutParams(trlp2);
    cell2.setBackgroundColor(Color.GREEN);
    tr2.addView(cell2);

Can I dynamically change the number of collumns?

The number of columns in the TableLayout results from the row that has the biggest number of cells(if a row has 2 cells and another row has 12 cells, then a TableLayout containing those two rows would have 12 columns). To increase or decrease the number of columns you just have to add or remove cells from the row/rows that have the biggest number of cells.

I want the table to fill the whole screen width and not to be glued to the left side

I didn't understand what you want(I hope that your TableLayout's is set to FILL_PARENT). There is the android:stretchColumns="*"(and a method that you could call in code) that will make your columns to take any extra available space in the TableLayout.

Thank you very much! That is what I was asking for and it works. I don't use the `android:stretchColumns` method, because the added/inserted layout has a fixed width—a picture with a bit text. But with a finishing touch it will look good on both screens. P.S.: And thanks for revising my question. — TabJohn, Jun 19 '12 at 16:31

TabJohn · Answer 2 · 2012-06-28T15:43:53.710

If anyone else has a similar question and wants to load dynamically an unknown amount of views into an existing layout:

Just use a RelativeLayout, add the first View to the place you want to and align the rest with reference to the ones that have been added before. Android will not automatically make a line break for every view that does not fit into the same line, so you have to calculate inbefore or go by try-and-error.

Here is a rough example. First a code snippet from the methode that fills the interface:

ArrayList<Item> listItems = item.getItems();
if( listItems != null ) {
    for( Item item: listItem ) {
        addItem( MyActivity.this, item, iCounterItemNumber );
        iCounterItemNumber++;
    }
}

And here the addItem methode:

private void addItem( Activity context, final Item item, int iCounterItemNumber ) {
    View vItem = LayoutInflater.from(context).inflate(R.layout.layoutinflatable_item, null);
    TextView txtvItemName = (TextView) vItem.findViewById(R.id.textView_itemName);

    txtvItemName.setText(item.getName());

    vItem.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View vItem) {
            // just to show that you can set a OnClickListener      
        }
    });

    if ( iCounterItemNumber == 0 ) {
        RelativeLayout.LayoutParams rlpItemParemeters = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        rlpItemParemeters.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        rlpItemParemeters.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        vItem.setId( 100 );
        _rlItemTable.addView( vItem, rlpItemParemeters );
    } else if ( iCounterItemNumber % 2 == 0 ) {
        RelativeLayout.LayoutParams rlpPackageParemeters = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        rlpPackageParemeters.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        rlpPackageParemeters.addRule(RelativeLayout.BELOW, ( 100 - 2 + iCounterItemNumber ) );
        vPackage.setId( 100 + iCounterItemNumber );
        _rlShopPackagesTable.addView( vPackage, rlpPackageParemeters );
    } else {
        RelativeLayout.LayoutParams rlpPackageParemeters = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        rlpPackageParemeters.addRule(RelativeLayout.ALIGN_BOTTOM, ( 100 - 1 + iCounterItemNumber ) );
        rlpPackageParemeters.addRule(RelativeLayout.RIGHT_OF, ( 100 - 1 + iCounterItemNumber ) );
        vPackage.setId( 100 + iCounterItemNumber );
        _rlItemTable.addView( vPackage, rlpPackageParemeters );

}

I know you can shorten it a bit, but it should just be a sketchy example. Hope it is clear what I did here. Different screen sizes are not covered. Either use different sized views, that you add, or get the screen size and use different methods then.

How do I inflate single cells in a TableLayout?

2 Answers2