Thursday, October 4, 2012

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.