Mar 4, 2011

Multicolumn ListView in Android

Ever since I started programming on the Android platform, I have been wondering when the SDK would include a ready-made multicolumn ListView (or listbox as it is often called in other frameworks). One could of course construct such a thing by slapping regular ListViews side by side and then painfully adding code to keep them all in sync when scrolled and so on. It felt such a hack that I used GridView instead. GridView is not really a great list, though, because the cells will all be formatted the same. There are other issues besides that, but for me that was the main one.
I finally saw a blog post which customized ListView to put Three TextViews vertically into one line. It was pretty simple going from there to one that would display three TextViews side-by-side. The main layout XML file could define ListView something like this:
<!-- main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 />
</LinearLayout>
Here is the XML for each row, main point being that we put three TextViews in LinearLayout with horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<!-- row.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:paddingTop="4dip"
    android:paddingBottom="6dip"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView 
    android:id="@+id/t1"
    android:layout_width="90dip"
    android:layout_height="wrap_content"
    android:text="text1"/>
     <TextView 
     android:id="@+id/t2"
    android:layout_width="90dip"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="text2"/>
      <TextView 
     android:id="@+id/t3"
    android:layout_width="50dip"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="text3" />
      </LinearLayout>
Notice how you can format each TextView separately. There is no column separator, but something decent should not be too hard to whip up if desired. My understanding is that the screen width is supposed to be 160 dip, but for some reason I had to use width values that actually add up to more than that, as well as using layout weight to grow some fields proportionally so that when you switch to landscape mode things are still nicely aligned. I would have expected specifying widths in dip would have automatically done that.
Here is how you could populate that ListView with data:
ListView list =getListView();
 
Main class :
-------------
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import android.app.ListActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class MultiList extends ListActivity {
   
    ListView lv;
    SimpleAdapter sd;
      @Override
    public void onCreate(Bundle savedInstanceState) {
        try {
        super.onCreate(savedInstanceState);
       Calendar c=Calendar.getInstance();
       lv=getListView();
        ArrayList<HashMap<String,String>> alist=new ArrayList<HashMap<String,String>>();
        HashMap<String, String>map=new HashMap<String, String>();
        map.put("Date","Date :"+c.get(Calendar.DATE));  // printing date
        map.put("Month", "Month :"+(c.get(Calendar.MONTH)+1)); // printing month
        map.put("Time", "Time :"+new Date().toString());  // printing Date
        alist.add(map);
        sd=new SimpleAdapter(this,alist,R.layout.rows,new String[]{"Date","Month","Time"},new int[]{R.id.t1,R.id.t2,R.id.t3});
        lv.setAdapter(sd);
        }
        catch (Exception e) {
            Log.w("Sravan", e.toString());
        }
    }
}
The main point here is that the SimpleAdapter requires the data to be in a List, where each entry is a Map. In my case, I simulate the columns by putting in three entries into each of the maps, and the maps each have the same keys. The adapter then maps the key values (like "Date") to the corresponding TextView (R.id.t1).
Putting the above pieces of code into Caltroid produces results that look like this:

Final Screen  For Complete Project Source code Click Here                   

No comments:

Post a Comment