Android: Creating Multi-Column Layout with ArrayAdapter

Android provides ListView for creating list with single column where as there is GridView which is used to create the grid view. However there cases when you would want to create tabular format data view e.g. list view with multiple columns. In order to display a list of data in a multi-column layout spreadsheet style, you could follow some examples on stackoverflow.com. I have gone through most of them and used the simple and easy to use format for my app and thought to share for my viewers.

here are the steps:

Step 1. insert a simple list view which you would turn it to multi column.

file: main.xml

[xml]
<ListView android:id="@+id/mylist" android:layout_width="wrap_content" android:layout_height="wrap_content">
</ListView>
[/xml]

Step 2. create a row format which will be shown for each row in the list. (multi column view).

file: mylistrow.xml

[xml]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="4dip"
android:paddingBottom="6dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:id="@+id/column1"
android:gravity=”left”
android:layout_width="50dip"
android:layout_height="wrap_content"/>
<TextView android:id="@+id/column2"
android:gravity=”center”
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView android:id="@+id/column3"
android:gravity=”right”
android:layout_width="60dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
[/xml]

notice the gravity field, which means how you would like to change the orientation of the text. The last two columns have layout weight 1 which means the extra space in the row will be evenly distributed to these columns in order to fill the space. you can read more about weight here.

Step 3. using SimpleAdapter to configure the data binding to these columns

[java]
ListView list = (ListView) findViewById(R.id.mylist);
ArrayList<HashMap<String, String>> mylistData =
new ArrayList<HashMap<String, String>>();

String[] columnTags = new String[] {"col1", "col2", "col3"};

int[] columnIds = new int[] {R.id.column1, R.id.column2, R.id.column3};
for(int i=0; i<3; i++)
{
HashMap<String,String> map = new HashMap<String, String>();
//initialize row data
for(int j=0; j<3; j++)
{
map.put(columnTags[j], "row”+i+”col"+j);
}
mylistData.add(map);
}
SimpleAdapter arrayAdapter =
new SimpleAdapter(this, mylistData, R.layout.mylistrow,
columnTags , columnIds);
list.setAdapter(arrayAdapter);
[/java]

Here is how the list will look like:

row0col0	row0col1	row0col2
row1col0	row1col1	row1col2
row2col0	row2col1	row2col2

for more details on how to use advanced features of the listview, refer here.