Monday, 15 July 2013

MultiColumn ListView in Android.

                             ListView is a powerful widget in android and it is not so difficult to use the same in our application. But the real pain starts when one needs to use a listview which contains more than one columns. Most of the developers at their early stage of development career wonder why it is not included in the Android SDK as they need to use it  in so many situations. But friends dont bother about why it is not included in Android SDK, there are some alternate ways.......

 Lets start........

First I'll tell the basic steps and then the complete code 

1.Create an Android Project. It contains an xml layout file, remove the textview   widget and add a 2 listviews instead of that, one for the title and other for the contents.Youcan do this  with a single listview also.

2.Create a new android layout file and make the layout of a single row of the required listview. For eg: If we want a listview with three columns add 3 textviews (better to use Linear layout (horizontal)). The layout part is over now we move to the activity class.

3. In the onCreate() method  get the ids of the listviews.

        list = (ListView) findViewById(R.id.listView2);
        list_head = (ListView) findViewById(R.id.listView1); 

4. Using ArrayLists , Hashmaps and List Adapters we display the list as follows.

        mylist = new ArrayList<HashMap<String, String>>();
        mylist_title = new ArrayList<HashMap<String, String>>();
       
        /**********Display the headings************/
       
       
        map1 = new HashMap<String, String>();

         map1.put("slno", "SlNo");
         map1.put("one", " Country");
         map1.put("two", " Capital");
         mylist_title.add(map1);

       
       
        try {
            adapter_title = new SimpleAdapter(this, mylist_title, R.layout.row,
                    new String[] { "slno", "one", "two" }, new int[] {
                            R.id.Slno, R.id.one, R.id.two });
            list_head.setAdapter(adapter_title);
        } catch (Exception e) {
           
        }
       
     
        /**********Display the contents************/
       
        for (int i = 0; i < countrys.length; i++) {
            map2 = new HashMap<String, String>();

            map2.put("slno", String.valueOf(i + 1));
            map2.put("one", countrys[i]);
            map2.put("two", capitals[i]);
            mylist.add(map2);
        }

       
        try {
            adapter = new SimpleAdapter(this, mylist, R.layout.row,
                    new String[] { "slno", "one", "two" }, new int[] {
                            R.id.Slno, R.id.one, R.id.two });
            list.setAdapter(adapter);
        } catch (Exception e) {
           
        }

  The complete code is as follows.

  1. activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:orientation="vertical"
  
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark" >
    </ListView>

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

</LinearLayout>

2. row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/Slno"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_weight="1"
        android:text="" />

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_weight="1"
        android:text="" />

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_weight="1"
        android:text="" />

</LinearLayout>

3. MainActivity.java

package com.example.multicolumnlist;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

    ListView list,list_head;
    ArrayList<HashMap<String, String>> mylist, mylist_title;
    ListAdapter adapter_title, adapter;
    HashMap<String, String> map1, map2;
    String[] countrys = { "India", "Pakistan", "China", "Bangladesh","Afghanistan"  };
    String[] capitals = { "New Delhi", "Islamabad", "Beijing", "Dhaka"," Kabul" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        /***get the ids****************/
        list = (ListView) findViewById(R.id.listView2);
        list_head = (ListView) findViewById(R.id.listView1);
       
        showActivity();

    }

    public void showActivity() {

        mylist = new ArrayList<HashMap<String, String>>();
        mylist_title = new ArrayList<HashMap<String, String>>();
       
        /**********Display the headings************/
       
       
        map1 = new HashMap<String, String>();

         map1.put("slno", "SlNo");
         map1.put("one", " Country");
         map1.put("two", " Capital");
         mylist_title.add(map1);

       
       
        try {
            adapter_title = new SimpleAdapter(this, mylist_title, R.layout.row,
                    new String[] { "slno", "one", "two" }, new int[] {
                            R.id.Slno, R.id.one, R.id.two });
            list_head.setAdapter(adapter_title);
        } catch (Exception e) {
           
        }
       
        /********************************************************/
       
       
        /**********Display the contents************/
       
        for (int i = 0; i < countrys.length; i++) {
            map2 = new HashMap<String, String>();

            map2.put("slno", String.valueOf(i + 1));
            map2.put("one", countrys[i]);
            map2.put("two", capitals[i]);
            mylist.add(map2);
        }

       
        try {
            adapter = new SimpleAdapter(this, mylist, R.layout.row,
                    new String[] { "slno", "one", "two" }, new int[] {
                            R.id.Slno, R.id.one, R.id.two });
            list.setAdapter(adapter);
        } catch (Exception e) {
           
        }
       
        /********************************************************/

    }

}

The final Output will be as shown below.







I hope this tutorial has helped you to understand how to make  a simple multicolumn listview in android.
Please feel free to leave your comments and suggestions below.