How to display a two column ListView in Android?

Question

I have an android application that shows a grid view that shows:

1

2

3

4

GridView gridview=(GridView)findViewById(R.id.GridView_test);
DataBaseHelper dbhelper=new DataBaseHelper(this);
ArrayList<String> test=new ArrayList<String>(5);
backlinksadapter.add("1");
backlinksadapter.add("2");
backlinksadapter.add("3");
backlinksadapter.add("4");
ArrayAdapter mAdapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, test);
gridview.setAdapter(mAdapter);

By the moment is working, but i would like to show foreach line of the grid, 2 columns with the values of a 2 dimensional array (something like the GridView in ASP.Net - as datasource -).

I would like to show:

1 | Person 1

2 | Person 2

3 | Person 3

4 | Person 4

Any idea?

Answer 1

Does it have to be a grid view? Will a ListView work?

I wrote a ListView and ListActivity that displays two items in each row. I started with the SDK supplied simple_list_item_2.xml layout that lists two items per row but places one on top of the other (two lines) with the second line using a smaller font. What I wanted was both items on the same line, one to the right and one to the left.

First I copied the simple_list_item_2.xml into my project's res/layout directory under a new name and changed the property android:mode="twoLine" to "oneLine" while still keeping the view element name as "TwoLineListItem". I then replaced the two inner elements with ones that did what I wanted.

In the code to initialize the list, I created a MatrixCursor and filled it with the desired data. To support two items, each row in the MatrixCursor requires three columns, one being a primary key, "_id", and the other two columns being the items that I wanted to be displayed. I was then able to use a SimpleCursorAdapter to fill in and control the ListView.

My Layout XML File:

 <?xml version="1.0" encoding="utf-8"?>
  <TwoLineListItem
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:paddingTop="2dip"
     android:paddingBottom="2dip"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:minHeight="?android:attr/listPreferredItemHeight"
     android:mode="oneLine"
  >
<TextView
    android:id="@android:id/text1"
    android:gravity="left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="6dip"
    android:layout_marginTop="6dip"
    android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
    android:id="@android:id/text2"
    android:gravity="right"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="6dip"
    android:layout_marginTop="6dip"
    android:layout_marginRight="6dip"
    android:layout_toRightOf="@android:id/text1"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="@color/MainFontColor"
/>
</TwoLineListItem>

Note that I used "left" and "right" android:gravity values to make the left side item left justified and the right side item right justified. You will need different gravity values for your layout plus you will need properties to control the size of the left side item that I did not need.

The method in my ListActivity class that initialized the ListView:

private void initListView()
{
    final String   AuthorName    = "Author: ";
    final String   CopyrightName = "CopyRight: ";
    final String   PriceName     = "Price: ";

    final String[] matrix  = { "_id", "name", "value" };
    final String[] columns = { "name", "value" };
    final int[]    layouts = { android.R.id.text1, android.R.id.text2 };

    MatrixCursor  cursor = new MatrixCursor(matrix);

    DecimalFormat formatter = new DecimalFormat("##,##0.00");

    cursor.addRow(new Object[] { key++, AuthorName, mAuthor });
    cursor.addRow(new Object[] { key++, CopyrightName, mCopyright });
    cursor.addRow(new Object[] { key++, PriceName,
            "$" + formatter.format(mPrice) });

    SimpleCursorAdapter data =
        new SimpleCursorAdapter(this,
                R.layout.viewlist_two_items,
                cursor,
                columns,
                layouts);

    setListAdapter( data );

}   // end of initListView()

The parameter to the MatrixCursor constructor is an array of strings that define the order and the names of the columns in the cursor. Important: Make sure to add an "_id" column, without it the MatrixColumn will throw an exception and fail to work!

The three variables, mAuthor, mCopyright and mPrice, are three data members in my ListAdaptor class and they are initialized elsewhere. In my actual code, mAuthor is actually built in this method from a list of author names. The author names are concatenated into a single string using "\n" as separators between the names. This causes the multiple author names to appear on different lines in the same TextView.

The SimpleCursorAdapter ctor parameters are the ID of the View to use for each List row, the cursor containing the data, an array of strings where each element is the name of the column from the cursor (in the order to get them) and a corresponding array of View IDs for the View to use for each item in the List row.

Answer 2

If you can't find an existing adapter that has those properties, you can create your own custom adapter and have it map to your view.

The Hello, GridView tutorial shows how to do this.