2
votes

I am trying to make a complex grid using TableLayout. I manage to make it by xml like this (some of the boxes in the grid is not highlighted):

enter image description here

By this code:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

<FrameLayout 
   android:layout_width="fill_parent"
   android:layout_height="fill_parent" 
   android:layout_weight="0.15">


    <TableLayout 
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">

        <TableRow
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:background="@android:color/holo_green_light"
             android:layout_weight="1">
             <TableRow
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:background="@android:color/holo_green_light"
             android:layout_weight="1">

            </TableRow>
            <TableRow
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:background="@android:color/holo_orange_light"
             android:layout_weight="1">

            </TableRow>

            </TableRow>
         <TableRow
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:layout_weight="1">

              <TableRow
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:background="@android:color/holo_orange_light"
             android:layout_weight="1">

            </TableRow>
            <TableRow
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:background="@android:color/holo_green_light"
             android:layout_weight="1">

            </TableRow>


        </TableRow>          
    </TableLayout>

    <TableLayout 
             android:layout_width="fill_parent"
             android:layout_height="fill_parent">
         <TableRow 
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
              android:background="@android:color/holo_green_light"
             android:layout_weight="1"/>
         </TableLayout>

     <TableLayout 
             android:layout_width="fill_parent"
             android:layout_height="fill_parent">
        <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_orange_light"
            android:layout_weight="1">

             <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_orange_light"
            android:layout_weight="1"/>                 
            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_red_light"
            android:layout_weight="1"/>
            <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_blue_light"
            android:layout_weight="1"/>
            <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_green_light"
            android:layout_weight="1"/>

        </TableRow>

        <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_green_light"
            android:layout_weight="1">

            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_green_light"
            android:layout_weight="1"/>
            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_orange_light"
            android:layout_weight="1"/>                 
            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_red_light"
            android:layout_weight="1"/>
            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_blue_light"
            android:layout_weight="1"/>

        </TableRow>

         <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_blue_light"
            android:layout_weight="1">

            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_blue_light"
            android:layout_weight="1"/>
             <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_green_light"
            android:layout_weight="1"/>
             <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_orange_light"
            android:layout_weight="1"/>                 
            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_red_light"
            android:layout_weight="1"/>

        </TableRow>

        <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_red_light"
            android:layout_weight="1">

            <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_red_light"
            android:layout_weight="1"/>
             <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_blue_light"
            android:layout_weight="1"/>
              <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_green_light"
            android:layout_weight="1"/>
             <TableRow 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/holo_orange_light"
            android:layout_weight="1"/>     

        </TableRow>
         </TableLayout>

    </FrameLayout>
  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="0.85"></LinearLayout>

The problem is that when I try to make one of the parts of this grid programmatically it is only shows the TableRow that is direct children of the TableLayout, and not the TableRows that are children of another TableRow. I use this Java code:

TableLayout table1 = new TableLayout(this);
//Add TableLayout to a FramLayout holding multiple TableLayouts
frame.addView(table1);
table1.setBackgroundResource(R.color.some_random_color_for_debugging);


for(int num = 0; num<2; num++){
    //4x2
    TableRow row = new TableRow(this);
    TableLayout.LayoutParams par = new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.FILL_PARENT, 1f);
    row.setLayoutParams(par);
    if(num==1){
        row.setBackgroundResource(R.color.some_random_color_for_debugging1);
    }
    table1.addView(row, par);       
    for(int num1 = 0; num1<2; num1++){
        //2x2
        TableRow box = new TableRow(this);
        TableRow.LayoutParams param = new TableRow.LayoutParams();
        box.setLayoutParams(param);
        if(num1==1){
            box.setBackgroundResource(R.color.some_random_color_for_debugging2);
        }
        row.addView(box, par);      
    }
}

This code makes half the screen some_random_color_for_debugging1, with a background color of some_random_color_for_debugging.

How can I make it show both TableRow row and box?

1
It's not clear which part are you trying to build in code. Also, you initial layout is bad from the start, too much weight is being use with impact on performance.user
@Luksprog Do you know I can build a layout like this without using weight? Meausring the size of the parent view is an option, before dividing it by the given number of boxes.Magakahn

1 Answers

1
votes

I think TableRow needs a TableLayout as a parent to properly work. To make your question work with TableLayout/TableRow you'd need to add a new TableLayout inside every row. Probably you can tweak it by hand with the structure you're proposing and it sort of might work, because TableLayout / TableRows are just cooked LinearLayouts.

But If you accept the advice, I strongly advise you against using TableLayout's at all. I've been using a lot of them in my last app to do things similar to yours, and finally substituted all of them with FrameLayout's and coordinate calculation. The performance of TableLayouts in my experience is just terrible, specially if you put TextViews inside. A table of just 10x10 eats the processor on my tablet, while the FrameLayout approach just flies as expected. If you take a look at a question I posted some time ago (ultra-slow tablelayout performance) , you'll see there are some related questions complaining about performance as well ....