Thursday, 4 October 2012

Multi Selection Listview example in Android

Hello Guys. Today I am going to post the example for multiple selection ListView.
Below there are some steps to create multiple selection ListView.

  1. Create a Pojo class of your field to display on the List row.
  2. Create a layout for ListView row.
  3. Create a layout for Main Activity.
  4. Create a Adapter for the ListView who support the multiple selection
  5. Create a Main Activity class.

Step1

Create a class Product and defined all the filed which you want to display on the ListView row.
Here is my Product class which has only Title field.



public class Product {
String name;
public Product(String name) {
// TODO Auto-generated constructor stub
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
// TODO Auto-generated method stub
return this.name;
}
}

Step2

Create a layout row.xml for ListView row.
Here is my 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="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp" >
    <CheckBox 
        android:id="@+id/chkEnable"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text=""/>
    <TextView 
        android:id="@+id/tvTitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

Step3

Create a layout for main activity
Here is my layout activity_main.xml 


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ListView
        android:id="@android:id/list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_above="@+id/btnShowCheckedItems"
        />
    
    <Button 
        android:id="@+id/btnShowCheckedItems"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Show"
        />
</RelativeLayout>

Step4 

Create a Adapter which support Multiple selection in Listview
Here is my Adapter MultiSelectionAdapter.java


import java.util.ArrayList;
import android.content.Context;
import android.util.SparseBooleanArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TextView;
public class MultiSelectionAdapter<T> extends BaseAdapter{
Context mContext;
LayoutInflater mInflater;
ArrayList<T> mList;
SparseBooleanArray mSparseBooleanArray;
public MultiSelectionAdapter(Context context, ArrayList<T> list) {
// TODO Auto-generated constructor stub
this.mContext = context;
mInflater = LayoutInflater.from(mContext);
mSparseBooleanArray = new SparseBooleanArray();
mList = new ArrayList<T>();
this.mList = list;
}
public ArrayList<T> getCheckedItems() {
ArrayList<T> mTempArry = new ArrayList<T>();
for(int i=0;i<mList.size();i++) {
if(mSparseBooleanArray.get(i)) {
mTempArry.add(mList.get(i));
}
}
return mTempArry;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mList.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return mList.get(position);
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
if(convertView == null) {
convertView = mInflater.inflate(R.layout.row, null);
}
TextView tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
tvTitle.setText(mList.get(position).toString());
CheckBox mCheckBox = (CheckBox) convertView.findViewById(R.id.chkEnable);
mCheckBox.setTag(position);
mCheckBox.setChecked(mSparseBooleanArray.get(position));
mCheckBox.setOnCheckedChangeListener(mCheckedChangeListener);
return convertView;
}
OnCheckedChangeListener mCheckedChangeListener = new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// TODO Auto-generated method stub
mSparseBooleanArray.put((Integer) buttonView.getTag(), isChecked);
}
};
}

Step5

Create a Main Activity
Here is my code for Main activity


import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends Activity implements OnClickListener {
ListView mListView;
Button btnShowCheckedItems;
ArrayList<Product> mProducts;
MultiSelectionAdapter<Product> mAdapter;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        bindComponents();
        init();
        addListeners();
    }
    private void bindComponents() {
// TODO Auto-generated method stub
    mListView = (ListView) findViewById(android.R.id.list);
    btnShowCheckedItems = (Button) findViewById(R.id.btnShowCheckedItems);
}
    
    private void init() {
// TODO Auto-generated method stub
    mProducts = new ArrayList<Product>();
    mProducts.add(new Product("Pendrive"));
    mProducts.add(new Product("Laptop"));
    mProducts.add(new Product("Mouse"));
    mProducts.add(new Product("Keyboard"));
    mProducts.add(new Product("HDD"));
    mProducts.add(new Product("Ram"));
    mProducts.add(new Product("Cable"));
    mProducts.add(new Product("Monitor"));
    mProducts.add(new Product("Cabinate"));
    mProducts.add(new Product("CMOS"));
    mProducts.add(new Product("Charger"));
    mProducts.add(new Product("Processor"));
    mProducts.add(new Product("Laptop Bag"));
    mProducts.add(new Product("Laptop Stand"));
    mProducts.add(new Product("Head Phone"));
    mProducts.add(new Product("Mike"));
    mProducts.add(new Product("Bluetooth"));
    mProducts.add(new Product("Dongle"));
   
    mAdapter = new MultiSelectionAdapter<Product>(this, mProducts);
    mListView.setAdapter(mAdapter);
}
    
    private void addListeners() {
// TODO Auto-generated method stub
    btnShowCheckedItems.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(mAdapter != null) {
ArrayList<Product> mArrayProducts = mAdapter.getCheckedItems();
Log.d(MainActivity.class.getSimpleName(), "Selected Items: " + mArrayProducts.toString());
Toast.makeText(getApplicationContext(), "Selected Items: " + mArrayProducts.toString(), Toast.LENGTH_LONG).show();
}
}
}

Copy this code into your application and enjoy the multiple selection Listview.
I have created this adapter in a way that you can pass any type of object in this adapter
If you want to make the row more complex then you just need to changed the xml file and the getView method of the adapter class. 

Note: Any suggestions will be appreciated. 

11 comments:

  1. Excellent information and thanks for sharing.



    Android Development

    ReplyDelete
  2. Hi thanks for this post. I followed this tutorial but i am getting null point exception in this line mListView.setAdapter(mAdapter);. Do you have any idea??

    ReplyDelete
    Replies
    1. make sure you have Listview mListView is not null

      Delete
  3. thanks nice tutorial....

    ReplyDelete
  4. on using scroll check box being shown at wrong place,Solution??????

    ReplyDelete
  5. Hey! Nice tutorial, but using this method can I select all itens on the listview programmatically ?

    ReplyDelete
  6. Nice tutorial,Thank you so much

    ReplyDelete
  7. Thank you so much bro

    ReplyDelete