Making a 2D scrollable Table with clickable objects inside

Question

I'm trying to make a table/grid filled with items. So far, I have implemented a GridView as proposed by Fuzzical Logic. Here is an image of the result. I can scroll in both directions.

My problem is that by setting a new OnTouchListener to my GridView (which enables scrolling in both directions), my items are not clickable anymore. I have tried to call the OnItemClickListener from the method onTouch of my GridView, but I think it's too much complicated.

So I am asking you now, what is the best approach to show a table of clickable items scrollable in both directions. Also, the number of items can vary a lot, the number of columns as well. There can be "empty" cells.

I really like the GridView, because it's easy to manage, but it lacks the 2D scroll. Any idea ?

Gordak

score 1 · Answer 1 · answered Mar 05 '13 at 20:46

I have implemented a clickable Table the following way:

    TableLayout table = (TableLayout) findViewById(R.id.tableReportsList);
    table.setStretchAllColumns(true);  
    table.setShrinkAllColumns(true);  
    final String tag = "tag";

    for (Report tempReport : reportsRepository)
    {
        TableRow row = new TableRow(this);
        TableLayout.LayoutParams tableRowParams=new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT);
        tableRowParams.setMargins(0, 10, 0, 10);
        row.setLayoutParams(tableRowParams);
        row.setClickable(true);
        TextView tvName = new TextView(this);
        tvName.setBackgroundDrawable(getResources().getDrawable(R.drawable.table_row_shape));
        tvName.setText(tempReport.getName());
        tvName.setGravity(Gravity.CENTER_HORIZONTAL);
        tvName.setTextColor(getResources().getColor(R.color.my_black));  
        tvName.setTag(tag);
        row.addView(tvName);
        TextView tvPath = new TextView(this);
        tvPath.setBackgroundDrawable(getResources().getDrawable(R.drawable.table_row_shape));
        tvPath.setText(tempReport.getPath());
        tvPath.setGravity(Gravity.CENTER_HORIZONTAL);
        tvPath.setTextColor(getResources().getColor(R.color.my_black));
        row.addView(tvPath);
        map.put(tempReport.getName(), tempReport);
        row.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) 
            {   
                TextView tvName = (TextView) v.findViewWithTag(tag);
                Log.d(TAG, "looking for report with name: " + tvName.getText());
                Report report = (Report)map.get(tvName.getText());
                Log.d(TAG, "The report found: " + report.toString());
                Map<String, String> valuesmap = new HashMap<String, String>();  
                valuesmap.put(GetParametersAsyncTask.REPORTID_PARAM, report.getId());
                Log.d(TAG, "passed the following id to the asynctask: "+ report.getId());
                GetParametersAsyncTask asyncTask = new GetParametersAsyncTask(ReportsTableActivity.this, ((SGRaportManagerAppObj)getApplication()).getCurrentUrl());
                asyncTask.execute(valuesmap);
            }
        });
        table.addView(row);   
    }

while the xml file looks like this:

<FrameLayout>
  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="55dp" >

    <TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tableReportsList"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:shrinkColumns="*"  
        android:stretchColumns="*" >

        <TableRow
            android:layout_height="wrap_content"
            android:background="@color/light_gray"
            android:textStyle="bold" >

            <TextView
                android:id="@+id/nameLabel"
                android:layout_height="wrap_content"
                android:background="@drawable/table_row_shape"
                android:gravity="center_horizontal"
                android:text="@string/report_name"
                android:textColor="@color/my_black"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/pathLabel"
                android:layout_height="wrap_content"
                android:background="@drawable/table_row_shape"
                android:gravity="center_horizontal"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:text="@string/report_path"
                android:textColor="@color/my_black"
                android:textStyle="bold" />
        </TableRow>
    </TableLayout>
</ScrollView>

see if you find it helpful.

Thanks for your response. Unfortunately horizontal scrolling is not possible. What I would like is to scroll horizontally if the rows are too large. — Gordak, Mar 06 '13 at 11:03
But this is the way it's works, the view will be scrolled only if it's to big for the screen. same thing with the horizontal scroll view. you cant scroll a view unless it has where to be scrolled. — Emil Adz, Mar 06 '13 at 11:33
right, because that was what i needed, you talked about horizontal scroll view and I just pointed out that the affect will be the same and the view will be scroll only if it has where to be scrolled. if you want to be able to scroll all the TableLayout horizontally just change the ScrollView tag with a HorizontalScrollView tag. — Emil Adz, Mar 06 '13 at 12:04
The point is: I want to be able to scroll in both directions: horizontal and vertical. — Gordak, Mar 06 '13 at 13:52
I have never tried it but did you try to put inside of a ScrollView that sits in a HorizontalScrollView? — Emil Adz, Mar 06 '13 at 13:55

Making a 2D scrollable Table with clickable objects inside

1 Answers1