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)
This picture will hopefully describe this clearly if the above doesn't make too much sense:
Key:
- White: Do not scroll at all
- Blue: scroll vertically
- Red: scroll horizontally
- Purple: scroll both vertically and horizontally
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:
result_grid.xml:
<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">
<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">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<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"
/>
<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">
<TableLayout
android:id="@+id/contentTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"/>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_weight="0.1"
android:layout_alignParentBottom="true">
<Button
android:id="@+id/backButton"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="Return"/>
</LinearLayout>
</RelativeLayout>
Java 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<String[]> content;
// [Removed Code] Here I get some data from getIntent().getExtras() that will populate the content ArrayList
PopulateMainTable(content);
}
private void PopulateMainTable(ArrayList<String[]> content) {
// [Removed Code] There is some code here to style the table (so it has lines for the rows)
for (int i = 0; i < 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 < 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);
}
}
This is what it looks like:
So this is what it looks like with a little bit of horizontal scrolling
This is what it looks like when scrolling vertically, note that you lose the headers! This is a problem!
Two last things to note!
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!
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 partially worked 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 here 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!
If you made it this far to the end, kudos to you!
