Skip to content

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

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

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

file: mylistrow.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>

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

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);

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.



13 Comments

  1. Thank You sir

    Wednesday, June 27, 2012 at 5:54 am | Permalink
  2. Tracy-Ann wrote:

    This is brilliant! Just what I needed, thanks!

    Thursday, August 23, 2012 at 7:18 am | Permalink
  3. Timothy S. wrote:

    Thank you very much. This worked very nicely. I didn’t know about the SimpleAdapter and was a little intimidated by the ArrayList of HashMaps. However, thanks to your comprehensive and straightforward example, I was able to incorporate your ideas and improve the layout of my ListView.

    Thanks again!

    Saturday, November 17, 2012 at 4:19 pm | Permalink
  4. hashfold wrote:

    appreciate your feedback!

    Tuesday, December 4, 2012 at 3:54 pm | Permalink
  5. Just the job, thanks.

    Wednesday, January 2, 2013 at 9:49 am | Permalink
  6. Vivek wrote:

    Wow bro that’s a life saver will share for sure in my sf post!! god bless you!

    Monday, January 28, 2013 at 7:07 am | Permalink
  7. Vivek wrote:

    is it possible to add an image view and load an image there???

    Monday, January 28, 2013 at 7:09 am | Permalink
  8. hashfold wrote:

    good that you liked it.

    Thursday, January 31, 2013 at 5:11 am | Permalink
  9. hashfold wrote:

    I wish I could help here Vivek, it has been so long I did Android development. I’m not in touch anymore. I created couple of apps just to get feel of it.

    pls ask the question on stackoverflow.com and someone will surely help you out.

    Thursday, January 31, 2013 at 5:17 am | Permalink
  10. paritosh wrote:

    Thanks… It solved my problem

    Tuesday, March 26, 2013 at 5:05 am | Permalink
  11. nonozor wrote:

    Perfect, thanks a lot !

    Thursday, April 11, 2013 at 5:11 pm | Permalink
  12. nonozor wrote:

    Really good tutorial, but how to add a click listener in this structure in order to detect witch line have been selected ?

    Friday, April 12, 2013 at 8:34 am | Permalink
  13. BYRON wrote:

    Thanks, this tutorial was really useful. However it woud have been a good idea to mention that in this case the class should extend Activity, and not ListActiviy, the usual way to create lists.

    Wednesday, October 2, 2013 at 3:28 pm | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*