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.

17 comments:

  1. I,m looking for something like this.Thanks for the simple but very effective tutorial....

    ReplyDelete
  2. HI...

    This blog is very useful ..thank u so much..... :)

    ReplyDelete
  3. hi how ll we get the value of a column

    ReplyDelete
  4. thank you very much, this is what exactly I was looking for :)
    have a nice day

    ReplyDelete
  5. Hi
    I am fetching a data from excel sheet using apache poi. I want to display that in the same manner as above. Can u plz help me with that

    ReplyDelete
  6. THanks a lot buddy for sharing your valuable idea

    ReplyDelete
  7. We have a native component that is a fully featured multi column list view - Android DataGrid - http://www.androidjetpack.com/Home/AndroidDataGrid

    ReplyDelete
  8. You have been a tremendous help, thanks

    ReplyDelete
  9. How do I have to or can edit the XML file to add two buttons on the bottom in the ''view''?
    i have been trying in many ways to do it but haven't be able to do it. Please, help me!!

    ReplyDelete
  10. If paging listview, heading disappears...

    ReplyDelete
  11. Instead HashMap how can i pass a JSON data please help me....and thanks for the tutorial..

    ReplyDelete
  12. Thank you , using simple adapter is very easy compared to writing our own

    ReplyDelete
  13. In case the items are long, the text will wrap. I had trouble with the eight of the LinearLayout. So, I made the code below
    LinearLayout LinearListView = (LinearLayout) findViewById(R.id.LinearLayout1);

    ListView Listheader = (ListView) findViewById(R.id.listView1);
    ListView Listcontent = (ListView) findViewById(listView2);

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
    LinearListView.getLayoutParams());

    params.height = getheightoflistview(Listcontent);
    Listcontent.setLayoutParams(params);

    }

    and added this function

    private Integer getheightoflistview(ListView nameOfListView){
    //partly from
    //http://blog.lovelyhq.com/setting-listview-height-depending-on-the-items/
    int numberOfItems = nameOfListView.getCount();
    ListAdapter listAdapter = nameOfListView.getAdapter();
    // Get total height of all items.
    int totalItemsHeight = 0;
    for (int itemPos = 0; itemPos < numberOfItems; itemPos++) {
    View item = listAdapter.getView(itemPos, null, nameOfListView);
    item.measure(0, 0);
    totalItemsHeight += item.getMeasuredHeight();
    }
    // Get total height of all item dividers.
    int totalDividersHeight = nameOfListView.getDividerHeight() *
    (numberOfItems - 1);
    return totalItemsHeight + totalDividersHeight;
    }

    ReplyDelete
  14. if i click on listview then i want only country name in Toast msg box

    how to get single click value on clik multipl clum list view

    ReplyDelete
  15. Thank you very much, great Tutorial 😘😘😘

    ReplyDelete
  16. All sports toto | Sporting 100
    Best bets: Liverpool at 20/1 - 5/2. 4 Goals. Under-19 - 6/1. í† í† ė‚ŽėīíŠļ Over-19. 5/1. Over-16. 1pt Over-16. 5/1. Over-16. 1pt Over-16. 1pt Over-16. 4pt Over-16.

    ReplyDelete