Android custom Listview

- Kalimuthu Regaswamy

Most of android mobile applications has a listview that displays something. And its been a practise by all android developes to add a view of their taste, just by customizing the listview to what required. This blog explains how to create a custom listview in android mobile. I hope this blog will help any android application builders who need to customize listview. The view I am trying out here has a image, two textview and a multiple choice option. 

Designing Listview:

<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="@id/android:list"

android:layout_width="fill_parent"

android:layout_height="394dp"

android:layout_margin="5dp"

android:layout_weight="0.95"

android:cacheColorHint="#0000"

android:clipToPadding="true"

android:dividerHeight="1px"

android:scrollbars="none"

android:soundEffectsEnabled="true" >

</ListView>

</RelativeLayout>

Designing custom cell:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ImageView

android:id="@+id/Listimage"

android:layout_width="96px"

android:layout_height="96px"

android:layout_alignParentLeft="true"

android:layout_margin="1dp"

android:layout_marginTop="21dp"

android:background="@drawable/ic_launcher" />

<TextView

android:id="@+id/name"

android:layout_width="50dp"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_marginRight="119dp"

android:layout_toRightOf="@+id/Listimage"

android:ellipsize="end"

android:text="TextView"

android:textSize="20px"

android:textStyle="bold" />

<TextView

android:id="@+id/no"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/Listimage"

android:layout_alignLeft="@+id/name"

android:layout_marginBottom="14dp"

android:layout_marginLeft="16dp"

android:text="TextView"

android:textSize="15px" />

<CheckBox

android:id="@+id/check"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/no"

android:layout_alignParentRight="true"

/>

</RelativeLayout>

Creating pojo class:

The pojo class here gets and sets the needed objects

public class Pojo {

public String name;

public String no;

public String desc;

public String post;

private Boolean isSelected;

public Boolean getIsSelected() {

 return isSelected;

}

public void setIsSelected(Boolean isSelected) {

 this.isSelected = isSelected;

}

public String getName() {

 return name;

}

public void setName(String name) {

 this.name = name;

}

public String getNo() {

 return no;

}

public void setNo(String no) {

 this.no = no;

}

public String getDesc() {

 return desc;

}

public void setDesc(String desc) {

 this.desc = desc;

}

public String getPost() {

 return post;

}

public void setPost(String post) {

 this.post = post;

}

}

Coding list adapter :I have written a list adapter which actullay adds the custom cells designed into the listview. Adapter,  here is the bridge between a ListView and the data that backs the list. The ListView can display any data provided that it is wrapped in a ListAdapter.

public class MyCustomArrayAdapter extends ArrayAdapter<Pojo> {

 private final List<Pojo> list;

 private final Activity context;

 ViewHolder viewHolder=null ;

 public MyCustomArrayAdapter(Activity context, List<Pojo> list) {

 super(context, R.layout.customlist, list);

 this.context = context;

 this.list = list;

}

static class ViewHolder {

 protected TextView name,no;

 protected ImageView image;

 protected CheckBox checkbox;

}

@Override

public View getView(final int position, View convertView, ViewGroup parent) {

 View view = null;

 if (convertView == null) {

  LayoutInflater inflator = context.getLayoutInflater();

  view = inflator.inflate(R.layout.customlist, null);

  viewHolder = new ViewHolder();

  viewHolder.name = (TextView) view.findViewById(R.id.name);

  viewHolder.name.setTextColor(Color.BLACK);

  viewHolder.name.setEllipsize(TruncateAt.MIDDLE);

  viewHolder.no = (TextView) view.findViewById(R.id.no);

  viewHolder.no.setTextColor(Color.BLACK);

  viewHolder.image = (ImageView)         
  view.findViewById(R.id.Listimage);

  viewHolder.name.setText(list.get(position).getName());

  viewHolder.no.setText(list.get(position).getNo());

  viewHolder.checkbox =(CheckBox) view.findViewById(R.id.check);

  viewHolder.checkbox.setOnCheckedChangeListener(new 

   CompoundButton.OnCheckedChangeListener() {

    public void onCheckedChanged(CompoundButton buttonView,

    boolean isChecked) {

     Pojo element = (Pojo) viewHolder.checkbox

     .getTag();

     element.setIsSelected(buttonView.isChecked());

    }

  });

  viewHolder.image.setBackgroundResource(R.drawable.ic_launcher);

  viewHolder.checkbox.setTag(list.get(position));

  } else {

   view = convertView;

   ((ViewHolder)  
            view.getTag()).checkbox.setTag(list.get(position));             

    }

  return view;

 }

} 

Main activity class:

This is where the list is loaded. Here I have replaced the default array adapter with the custom adapter.

public class MainActivity extends ListActivity {

@Override

public void onCreate(Bundle savedInstanceState) {

 super.onCreate(savedInstanceState);

 setContentView(R.layout.activity_main);

 ArrayAdapter<Pojo> adapter = new MyCustomArrayAdapter(

 MainActivity.this, getData());

 setListAdapter(adapter);

}

public List<Pojo> getData(){

 List<Pojo> addList =new ArrayList<Pojo>();

 Pojo objectPojo=new Pojo();

 objectPojo.setName("muthu");

 objectPojo.setNo("1234");

 objectPojo.setDesc("android ");

 objectPojo.setPost("Developer");

 objectPojo.setIsSelected(false);

 addList.add(objectPojo);

 objectPojo=new Pojo();

 objectPojo.setName("kali");

 objectPojo.setNo("3456");

 objectPojo.setDesc("iPhone ");

 objectPojo.setPost("Developer");

 objectPojo.setIsSelected(false);

 addList.add(objectPojo);

 objectPojo=new Pojo();

 objectPojo.setName("arasu");

 objectPojo.setNo("5678");

 objectPojo.setDesc("windows ");

 objectPojo.setPost("Developer");

 objectPojo.setIsSelected(false);

 addList.add(objectPojo);

 objectPojo=new Pojo();

 objectPojo.setName("anbu");

 objectPojo.setNo("8901");

 objectPojo.setDesc("mac ");

 objectPojo.setPost("Developer");

 objectPojo.setIsSelected(false);

 addList.add(objectPojo);

 return addList;

 }

}

Android developers can just copy and paste the codes to get the listview customized as shown above.