Android - Multicolumn Listview


This tutorial will teach you how to implement a multicolumn listview in android. Refer to our previous articles if you need to implement a Simple Listview or a Listview with Checkbox Items. By the end of this tutorial you will be having most of the information to build listview according to your requirements.

ScreenShot

 

Create a Listview

ListView lv;
lv = (ListView) findViewById(R.id.listView1);

Create an Arraylist which will hold the HashMap

ArrayList<HashMap<String, String>> feedList= new ArrayList<HashMap<String, String>>();
HashMap<String, String> map = new HashMap<String, String>();

Add data to HashMap in Key-Value form

map.put("date", "1/7");
		map.put("description", "gift her");
		map.put("price", "23");
		map.put("discount", "25");
		

Add HashMap to ArrayList

feedList.add(map);

Create a SimpleAdapter

  • Pass context as first argument.
  • In the second argument you need to pass the layout in which you want your list to appear.
  • Then for each column you need to add a string value which is a key in your hashmap.
  • Corresponding to each column you need to pass the view-item id to this constructor as a fourth argument.
  • Each new hashmap is our new row.
SimpleAdapter simpleAdapter = new SimpleAdapter(this, feedList, R.layout.view_item, new String[]{"date", "description", "price", "discount"}, new int[]{R.id.textViewDate, R.id.textViewDescription, R.id.textViewDiscount, R.id.textViewPrice});

MainActivity

package com.example.kb4devmulticolumnlistview;

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

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {
    ListView lv;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		lv = (ListView) findViewById(R.id.listView1);
		ArrayList<HashMap<String, String>> feedList= new ArrayList<HashMap<String, String>>();
		HashMap<String, String> map = new HashMap<String, String>();
		map.put("date", "1/7");
		map.put("description", "gift her");
		map.put("price", "23");
		map.put("discount", "25");
		feedList.add(map);
		
		map = new HashMap<String, String>();
		map.put("date", "1/8");
		map.put("description", "nice phone");
		map.put("price", "67");
		map.put("discount", "50");
		feedList.add(map);
		
		map = new HashMap<String, String>();
		map.put("date", "1/6");
		map.put("description", "hello");
		map.put("price", "33");
		map.put("discount", "50");
		feedList.add(map);
		
		
		map = new HashMap<String, String>();
		map.put("date", "1/3");
		map.put("description", "yo");
		map.put("price", "123");
		map.put("discount", "33");
		feedList.add(map);
		
		
		
		map = new HashMap<String, String>();
		map.put("date", "1/2");
		map.put("description", "nice phone");
		map.put("price", "67");
		map.put("discount", "50");
		feedList.add(map);
		
		
		
		map = new HashMap<String, String>();
		map.put("date", "23/12");
		map.put("description", "nice car");
		map.put("price", "6700");
		map.put("discount", "50");
		feedList.add(map);
		
		
		map = new HashMap<String, String>();
		map.put("date", "4/3");
		map.put("description", "nice phone");
		map.put("price", "678");
		map.put("discount", "70");
		feedList.add(map);
		
		map = new HashMap<String, String>();
		map.put("date", "1/12");
		map.put("description", "Ymmy burger");
		map.put("price", "12");
		map.put("discount", "10");
		feedList.add(map);
		SimpleAdapter simpleAdapter = new SimpleAdapter(this, feedList, R.layout.view_item, new String[]{"date", "description", "price", "discount"}, new int[]{R.id.textViewDate, R.id.textViewDescription, R.id.textViewDiscount, R.id.textViewPrice});
		lv.setAdapter(simpleAdapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

Layouts

activity_main

  • Add a ListView inside LinearLayout and give it an id.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

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

</LinearLayout>

view_item

  • Create a LinearLayout.
  • Add four TextView's and make their text to be appear medium.
<?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/textViewDate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_weight="1"
          android:gravity="center"  
        android:textAppearance="?android:attr/textAppearanceMedium"  />


     <TextView
        android:id="@+id/textViewDescription"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_weight="1"
        android:gravity="center"  
        android:textAppearance="?android:attr/textAppearanceMedium" />
      <TextView
        android:id="@+id/textViewPrice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_weight="1" 
        android:gravity="center"  
        android:textAppearance="?android:attr/textAppearanceMedium"   />
       <TextView
        android:id="@+id/textViewDiscount"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView" 
          android:gravity="center"  
        android:layout_weight="1"
        android:textAppearance="?android:attr/textAppearanceMedium"  />

</LinearLayout>