title: Creating a table/grid with a frozen column and frozen headers
body: <p>I am working on a small Android app. Part of what I need for this android app is to have a grid that is both horizontally and vertically scroll-able. However, the leftmost column needs to be frozen (always on screen, and not part of the horizontal scrolling). Similarly, the top header row needs to be frozen (not part of the vertical scrolling)</p>
  
  <p>This picture will hopefully describe this clearly if the above doesn't make too much sense:</p>
  
  <p><img src="https://i.stack.imgur.com/HI6lJ.png" alt="Example of what I would like to do"></p>
  
  <p><strong>Key</strong>:</p>
  
  <ol>
  <li>White: Do not scroll at all</li>
  <li>Blue: scroll vertically</li>
  <li>Red: scroll horizontally</li>
  <li>Purple: scroll both vertically and horizontally</li>
  </ol>
  
  <p>To do one of these dimensions is easy enough, and I have done so. However, I am having trouble getting both of these dimensions to work. (i.e., I can get the bottom portion to be all blue, or I can get the right portion to be all red, but not entirely as above) The code I have is below, and will basically produce the following:</p>
  
  <p><img src="https://i.stack.imgur.com/7sw1j.png" alt="What I have!"></p>
  
  <p>result_grid.xml:</p>
  
  <pre><code>&lt;RelativeLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="@color/lightGrey"&gt;
  
      &lt;LinearLayout
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:layout_below="@id/summaryTableLayout"
          android:layout_weight="0.1"
          android:layout_marginBottom="50dip"
          android:minHeight="100dip"&gt;
          &lt;ScrollView
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:scrollbars="vertical"&gt;
              &lt;LinearLayout
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:orientation="horizontal"&gt;
                  &lt;TableLayout
                      android:id="@+id/frozenTable"
                      android:layout_height="wrap_content"
                      android:layout_width="wrap_content"
                      android:layout_marginTop="2dip"
                      android:layout_marginLeft="1dip"
                      android:stretchColumns="1"
                      /&gt;
  
                  &lt;HorizontalScrollView
                      android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
                      android:layout_toRightOf="@id/frozenTable"
                      android:layout_marginTop="2dip"
                      android:layout_marginLeft="4dip"
                      android:layout_marginRight="1dip"&gt;
  
                      &lt;TableLayout
                          android:id="@+id/contentTable"
                          android:layout_width="fill_parent"
                          android:layout_height="wrap_content"
                          android:stretchColumns="1"/&gt;
                  &lt;/HorizontalScrollView&gt;
              &lt;/LinearLayout&gt;
          &lt;/ScrollView&gt;
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:orientation="vertical"
          android:layout_weight="0.1"
          android:layout_alignParentBottom="true"&gt;
          &lt;Button
              android:id="@+id/backButton"
              android:layout_height="wrap_content"
              android:layout_width="fill_parent"
              android:text="Return"/&gt;
      &lt;/LinearLayout&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>Java code:</p>
  
  <pre><code>private boolean showSummaries;
  
  private TableLayout summaryTable;
  private TableLayout frozenTable;
  private TableLayout contentTable;
  
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.result_grid);
  
      Button backButton = (Button)findViewById(R.id.backButton);
      frozenTable = (TableLayout)findViewById(R.id.frozenTable);
      contentTable = (TableLayout)findViewById(R.id.contentTable);
  
      ArrayList&lt;String[]&gt; content;
  
      // [Removed Code] Here I get some data from getIntent().getExtras() that will populate the content ArrayList
      PopulateMainTable(content);
  }
  
  private void PopulateMainTable(ArrayList&lt;String[]&gt; content) {
      // [Removed Code] There is some code here to style the table (so it has lines for the rows)
  
      for (int i = 0; i &lt; content.size(); i++){
          TableRow frozenRow = new TableRow(this);
              // [Removed Code] Styling of the row
          TextView frozenCell = new TextView(this);
          frozenCell.setText(content.get(i)[0]);
          // [Removed Code] Styling of the cell
          frozenRow.addView(frozenCell);
          frozenTable.addView(frozenRow);
  
          // The rest of them
          TableRow row = new TableRow(this);
          // [Renoved Code] Styling of the row
          for (int j = 1; j &lt; content.get(0).length; j++) {
              TextView rowCell = new TextView(this);
              rowCell.setText(content.get(i)[j]);
              // [Removed Code] Styling of the cell
              row.addView(rowCell);
          }
  
          contentTable.addView(row);
      }
  }
  </code></pre>
  
  <p>This is what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/Iv6ar.png" alt="Look, headers!"></p>
  
  <p>So this is what it looks like with a little bit of horizontal scrolling</p>
  
  <p><img src="https://i.stack.imgur.com/84x7Q.png" alt="Bah, no headers!"></p>
  
  <p>This is what it looks like when scrolling vertically, note that you lose the headers! This is a problem!</p>
  
  <p>Two last things to note! </p>
  
  <p>First off, I cannot believe that this doesn't exist somewhere already. (I do not own an Android, so I have not been able to look around for apps that may do this). However, I have searched for at least two days within StackOverflow and in the Internet at large looking for a solution for either GridView or TableLayout that will provide me for what I'd like to do, and have yet to find a solution. As embarrassed as I would be for having missed it, if someone knows of a resource out there that describes how to do this, I would be grateful!</p>
  
  <p>Secondly, I did try to "force" a solution to this, in that I added two LinearLayouts, one capturing the "Header" part of the grid I want to create, and another for the bottom "content" part of the grid I want to create. I can post this code, but this is already quite long and I'm hoping that what I mean is obvious. This <em>partially worked</em> but the problem here is that the headers and content columns were never lined up. I wanted to use getWidth() and setMinimumWidth() on the TextViews within the TableRows, but as described <a href="https://stackoverflow.com/questions/3591784/android-get-width-returns-0">here</a> this data was inaccessible during onCreate (and was also inaccessible within onPostCreate). I have been unable to find a way to get this to work, and a solution in this realm would be wonderful as well! </p>
  
  <p>If you made it this far to the end, kudos to you!</p>