Android – Multi Column ListView

Description:
I know many novice android programmer are facing problem to implement multi-column listview or in confusion to implement this kind of view. so let me write here to implement multi columnr listview by using ListView itself.

Yes, its little bit tricky but if you have gone through my previous articles for creating Custom ListView then you will sure realize that its just a difference of creating listView_row xml layout file. Just go through the above link.

Output:

Android - ListView multicolumn

Solution:
I haven’t done any magic but created a listview_row.xml as:

multicolumn listview row

And now you can define the custom adapter for this listview same as our practice of defining custom adapter for ListView.

listview_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	android:id="@+id/relativeLayout1" 
	android:layout_height="fill_parent" 
	android:layout_width="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/FirstText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="First"
        android:layout_weight="1">
    </TextView>
    
    <TextView
        android:id="@+id/SecondText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Second"
        android:layout_weight="2">
    </TextView>
    
    <TextView
        android:id="@+id/ThirdText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Third"
        android:layout_weight="1">
    </TextView>
    
    <TextView
        android:id="@+id/FourthText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Fourth"
        android:layout_weight="1">
    </TextView>
</LinearLayout>

main.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="vertical" >
	
    <ListView
        android:id="@+id/listview"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
    </ListView>
    

</LinearLayout>

listviewAdapter.java

package com.paresh.demoexample;

import static com.paresh.demoexample.Constant.FIRST_COLUMN;
import static com.paresh.demoexample.Constant.SECOND_COLUMN;
import static com.paresh.demoexample.Constant.THIRD_COLUMN;
import static com.paresh.demoexample.Constant.FOURTH_COLUMN;

import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

/**
 *
 * @author Paresh N. Mayani
 */
public class listviewAdapter extends BaseAdapter
{
	public ArrayList<HashMap> list;
	Activity activity;

	public listviewAdapter(Activity activity, ArrayList<HashMap> list) {
		super();
		this.activity = activity;
		this.list = list;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return list.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

	private class ViewHolder {
	       TextView txtFirst;
	       TextView txtSecond;
	       TextView txtThird;
	       TextView txtFourth;
	  }

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub

		// TODO Auto-generated method stub
				ViewHolder holder;
				LayoutInflater inflater =  activity.getLayoutInflater();

				if (convertView == null)
				{
					convertView = inflater.inflate(R.layout.listview_row, null);
					holder = new ViewHolder();
					holder.txtFirst = (TextView) convertView.findViewById(R.id.FirstText);
					holder.txtSecond = (TextView) convertView.findViewById(R.id.SecondText);
					holder.txtThird = (TextView) convertView.findViewById(R.id.ThirdText);
					holder.txtFourth = (TextView) convertView.findViewById(R.id.FourthText);
					convertView.setTag(holder);
				}
				else
				{
					holder = (ViewHolder) convertView.getTag();
				}

				HashMap map = list.get(position);
				holder.txtFirst.setText(map.get(FIRST_COLUMN));
				holder.txtSecond.setText(map.get(SECOND_COLUMN));
				holder.txtThird.setText(map.get(THIRD_COLUMN));
				holder.txtFourth.setText(map.get(FOURTH_COLUMN));

			return convertView;
	}

}

MultiColumnActivity.java

package com.paresh.demoexample;

import static com.paresh.demoexample.Constant.FIRST_COLUMN;
import static com.paresh.demoexample.Constant.SECOND_COLUMN;
import static com.paresh.demoexample.Constant.THIRD_COLUMN;
import static com.paresh.demoexample.Constant.FOURTH_COLUMN;

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

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

/**
 *
 * @author Paresh N. Mayani
 */
public class MultiColumnActivity extends Activity
{
	private ArrayList<HashMap> list;

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ListView lview = (ListView) findViewById(R.id.listview);
        populateList();
        listviewAdapter adapter = new listviewAdapter(this, list);
        lview.setAdapter(adapter);
    }

    private void populateList() {

    	list = new ArrayList<HashMap>();

		HashMap temp = new HashMap();
			temp.put(FIRST_COLUMN,"Colored Notebooks");
			temp.put(SECOND_COLUMN, "By NavNeet");
			temp.put(THIRD_COLUMN, "Rs. 200");
			temp.put(FOURTH_COLUMN, "Per Unit");
		list.add(temp);

		HashMap temp1 = new HashMap();
			temp1.put(FIRST_COLUMN,"Diaries");
			temp1.put(SECOND_COLUMN, "By Amee Products");
			temp1.put(THIRD_COLUMN, "Rs. 400");
			temp1.put(FOURTH_COLUMN, "Per Unit");
		list.add(temp1);

		HashMap temp2 = new HashMap();
			temp2.put(FIRST_COLUMN,"Note Books and Stationery");
			temp2.put(SECOND_COLUMN, "By National Products");
			temp2.put(THIRD_COLUMN, "Rs. 600");
			temp2.put(FOURTH_COLUMN, "Per Unit");
		list.add(temp2);

		HashMap temp3 = new HashMap();
			temp3.put(FIRST_COLUMN,"Corporate Diaries");
			temp3.put(SECOND_COLUMN, "By Devarsh Prakashan");
			temp3.put(THIRD_COLUMN, "Rs. 800");
			temp3.put(FOURTH_COLUMN, "Per Unit");
		list.add(temp3);

		HashMap temp4 = new HashMap();
			temp4.put(FIRST_COLUMN,"Writing Pad");
			temp4.put(SECOND_COLUMN, "By TechnoTalaktive Pvt. Ltd.");
			temp4.put(THIRD_COLUMN, "Rs. 100");
			temp4.put(FOURTH_COLUMN, "Per Unit");
		list.add(temp4);
	}
}

Constant.java

package com.paresh.demoexample;

/**
 *
 * @author Paresh N. Mayani
 */
public class Constant {
	public static final String FIRST_COLUMN = "First";
	public static final String SECOND_COLUMN = "Second";
	public static final String THIRD_COLUMN = "Third";
	public static final String FOURTH_COLUMN = "Fourth";
}

Download full Example from Here: Android – Multi Column ListView

Please feel free to give comment/feedback if you are knowing better solutions than this. :)


About Paresh Mayani

I'm Paresh Mayani, a passionate mobile application developer from India. Having been involved in android app development since 2010. By passion, I am Head/Organizer of Google Developers Group (GDG), Ahmedabad
  • Andrew S.

    please help :) in the multi clumn adapter .. how do i handle item clicks?
    Many thanks !

    • http://pareshnmayani.wordpress.com Paresh N Mayani

      Hey Andrew,
      Please let me know What you mean by “handle item clicks”?, do you want a click handler for whole items (i.e. whole row) or a click handler for a particular view residing inside an item?

      Please let me know so i can show implementation.
      Thanx

  • karthik

    May i get some small program for this same output???

    • http://www.technotalkative.com/ Paresh N. Mayani

      There is already a source code available for download…otherwise what do you mean by small program?

  • kavin

    u r great man

    • http://www.technotalkative.com/ Paresh N. Mayani

      Thanx, you are also great man as you have given feedback :)

  • quky

    any tip on how to add items to the list view at run time

    any help would be appreciated

    best regards HP

    • http://www.technotalkative.com/ Paresh N. Mayani

      Yes its very simple, just a add an item in list and call adapter.notifyDataSetChanged() method.

  • Helge

    Hey dude,
    awesome solution, works like a charm.
    I’d be interested in a click handler, too. For the whole row. I’m pretty new to android development and in a phase of learning :)

    • http://www.technotalkative.com/ Paresh N. Mayani

      Thanx Helge :)
      To assign click handler, just implement yourListView.setOnItemClickListener.

  • Gayathri

    I need add data from edittexts to multiple column listview using add button clicked.
    Please help me.I am newer to android………………

    • http://www.technotalkative.com/ Paresh N. Mayani

      For implementing that functionality, just create a new object same as “temp”, “temp1″ of type HashMap and add it into the List and just call a method notifyDatesetChanged() for Adapter object.

      i.e.
      adapter.notifyDatasetChanged()

  • ketan hirpara

    hi… paresh!!!

    i realy like your site material. it is very useful for me.

    Now, i need output as multicolumn listview on selecting spinner item.
    And that listView will display the field from different database table.

    so, for that please help me.

    • http://www.technotalkative.com/ Paresh N. Mayani

      Hello Ketan,
      Its actually a long solution to write here.

      Let me know if you are done with database fetching operation so that i can help you to implement ListView display operation.

  • cantelk

    Very nice example. Im using a lot of code that you provided here for my project. I also have buttons in each row. Think about a restaurant menu and another list that shows what you have ordered. the menu list has buttons to buy items. When you click it I want the item to be added to the orders list. And in the orders list there are buttons in each row to cancel an order and remove it from the list. How can I handle this? I have buttons and I have listeners that work when button is clicked but how can I add the item to the ordered menu? I need to detect the selected row and add it to the other list etc.

    Thanks in advance:)

    • http://www.technotalkative.com/ Paresh N. Mayani

      Yes Cantelk, Its simply easy to implement. If you have defined Custom adapter by extending BaseAdapter then in getView() method you will get the position of the list item that you have clicked. You just need to pick that item and add it into the ordered menu list and don’t forget to call notifyDataSetChanged() to your order menu adapter.

      I can suggest you better if i have possible code!!

  • http://powerboy.ir hossein

    Thanks for sharing your knowledge

    I want highlight a row with specific color, what can i do?

    Thanks a lot

  • http://twitter.com/DeadMeatGF Steve Giller

    I’ve followed this tutorial and got it working – what I seem unable to do is create a custom listview with different element – specifically a TextView, EditText and CheckBox. It seems that the HashMap takes a (String, String) input but the CheckBox requires a (String, Boolean) and as we use the same HashMap for each row element this doesn’t work.
    I’m sure it’s me being a novice and the solution’s simpler than it seems, but I can’t get my head around this aspect!

  • vulturepiano

    I am using a similar row layout in my listview. It looks fine at first, but when I scroll down and back up again the layouts get messed up. I tried using a layout with fixed sizes rather than weights and it works fine. i would much rather use weights though, any thoughts?

  • pravin

    how to get dynamically data in multi column listview from database by using php json

  • pravin

    please post the example. of how to get dynamically data in multi column listview from database by using php json

    • http://www.technotalkative.com/ Paresh Mayani

      Actually that’s called “Web API call”, if your problem is this then i would suggest you to check my talk presented in NitroDroid, Goa event: https://speakerdeck.com/pareshmayani/web-api-integration-in-android,

      once you make web service, you will get data in JSON, parse it and pass to the custom adapter that you have created for ListView.

  • Darren Jones

    Hi, thanks for the example code. I find I get this error on the

    android:layout_weigth=”0dp” though

    Suspicious size: this will make the view invisible, probably intended for layout_height

    Did you see this at all?
    Thanks

    • Darren Jones

      Actually you can ignore my question, I just realised I had the orientation set to vertical! That would explain that then…
      Thanks again

      • http://www.technotalkative.com/ Paresh Mayani

        Great. Welcome