Android GridView with Both Horizontal and Vertical Scrolbars at the same time

Question

I am new to Android and Have to Port a Windows Mobile Application to an Android Application.

Issue: I need GridView in Android similar to .net GridView which is able to scroll in both Horizontal and Vertical directions at the same time.

As there are many rows and many columns in my data. So, all the columns are not shown as screen width is small on mobile. Multiple rows are shown as vertical scroll is enabled. What i want is that this GridView is somehow scrollable in both directions at the same time. So that user could view data in tabular form.

I am using GridView in Android with the help of TableLayout and SimpleAdapter. Following is my code:

Main Activity Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

<!-- This Table Layout is header followed by the gridview -->
<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp" >

    <TableRow android:layout_width="wrap_content" >

        <TextView
            android:id="@+id/schemeTitle"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="Scheme"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/nameTitle"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Name"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/productTitle"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Product"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/channelTitle"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="Channel"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/typeTitle"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="Type"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/customerSelectionTitle"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="Customer Selection"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/brandTitle"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="Brand"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/wsTitle"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="W/S"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/startDateTitle"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="Start Date"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/endDateTitle"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="End Date"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/codeTitle"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="Code"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tsidTitle"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="TSID"
            android:textStyle="bold" />
    </TableRow>
</TableLayout>

<GridView
    android:id="@+id/schemeGridView"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:clickable="true"
    android:numColumns="1"
    android:columnWidth="900dp" >
</GridView>

</LinearLayout>

Grid Layout:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" >

<TableRow android:layout_width="wrap_content" >

    <TextView
        android:id="@+id/scheme"
        android:layout_width="80dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/name"
        android:layout_width="200dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/product"
        android:layout_width="200dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/channel"
        android:layout_width="80dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/type"
        android:layout_width="100dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/customerSelection"
        android:layout_width="150dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/brand"
        android:layout_width="80dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/ws"
        android:layout_width="50dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/startDate"
        android:layout_width="80dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/endDate"
        android:layout_width="80dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/code"
        android:layout_width="80dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tsid"
        android:layout_width="50dp"
        android:layout_height="wrap_content" />
</TableRow>

</TableLayout>

Source Code:

public class Schemes extends BaseMainActivity {

private String obID = "";
private String obName = "";
ArrayList<HashMap<String, Object>> dtSchemes = null;
GridView schemeGridView = null;
Activity thisAct = this;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.schemes);

    ProgressDialog d = ProgressDialog.show(this, "Inventory",
            "Loading Inventory...");

    OrderBookingDAL dl = new OrderBookingDAL();
    obID = dl.getConfigValue("OBID");
    obName = dl.getConfigValue("OBName");
    dtSchemes = dl.getHHTSchemes(obID, obName, dtSchemes);

    schemeGridView = (GridView) findViewById(R.id.schemeGridView);

    SimpleAdapter sa = new SimpleAdapter(this, dtSchemes,
            R.layout.schemes_grid, new String[] { "Scheme", "Name",
                    "Product", "Channel", "Type", "CustomerSelection",
                    "Brand", "[W/S Approved]", "[Start Date]",
                    "[End Date]", "Code", "TSID" }, new int[] {
                    R.id.scheme, R.id.name, R.id.product, R.id.channel,
                    R.id.type, R.id.customerSelection, R.id.brand, R.id.ws,
                    R.id.startDate, R.id.endDate, R.id.code, R.id.tsid });
    schemeGridView.setAdapter(sa);
    schemeGridView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            Log.d("Grid Item Click", "Clicked pos:"+position);
            TextView txt = (TextView) view.findViewById(R.id.tsid);
            if (txt != null && txt.getText() != null) {
                String tsid = txt.getText().toString();
                Intent intent = new Intent(thisAct,SchemeDetails.class); 
                intent.putExtra(TSID_PARAM, tsid);
                thisAct.startActivity(intent);
            }
        }
    });
    d.dismiss();
}
}

Answer 1

I changed some code and finally able get tabular view.

Solution: I added HorizontalScrollView and now my LinearLayout is its child. Also I added android:stretchColumns="*" in TableLayout. Along with this i had to chnage android:layout_width and android:layout_height of different controls in following ways.

Updated code is below:

Main Activity Layout:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!-- This Table Layout is header followed by the gridview -->
    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:stretchColumns="*" >

        <TableRow android:layout_width="wrap_content" >

            <TextView
                android:id="@+id/schemeTitle"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="Scheme"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/nameTitle"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:text="Name"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/productTitle"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:text="Product"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/channelTitle"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="Channel"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/typeTitle"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:text="Type"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/customerSelectionTitle"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="Customer Selection"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/brandTitle"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="Brand"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/wsTitle"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:text="W/S"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/startDateTitle"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="Start Date"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/endDateTitle"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="End Date"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/codeTitle"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="Code"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tsidTitle"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:text="TSID"
                android:textStyle="bold" />
        </TableRow>
    </TableLayout>

    <GridView
        android:id="@+id/schemeGridView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:numColumns="1" >
    </GridView>
</LinearLayout>

</HorizontalScrollView>

Grid Layout:

Only following tag is chnaged:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:stretchColumns="*">

Source Code:

No change in Java code.

I got idea from: How can I make my layout scroll both horizontally and vertically? and How to put a very long table layout inside the horizontal Scroll view in the CORRECT way?

Answer 2

The simplest solution is

1. Use a horizontal scroll view to contain the GridView
2. Then dynamically re-size the GridView width based on the number of columns that you set for the GridView

3. Lastly, multiply number of columns with the width of each columns

   GridView gridView = (GridView) findViewById(R.id.grid_view);
   int numberOfColumns = 3;
   int sizeOfWidthPerColumn = 20;
   gridView.setNumColumns(numberOfColumns);
   ViewGroup.LayoutParams layoutParams = gridView.getLayoutParams();
   layoutParams.width = convertDpToPixels(numberOfColumns * sizeOfWidthPerColumn, this);
   gridView.setLayoutParams(layoutParams);
   

Now you are able to scroll the GridView horizontally and vertically.