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. 





2 comments:

Sevaa said...

thanks for posting the codes.twas really a great help.....click to read more....

Gear Oillubricants said...

Gear oil Manufacturers CNC lubricant is prime manufacture and marketer of industrial lubricants, knitting oil, semi synthetic cutting oil, rust preventive oil, metal working fluids, hydraulic oil and CNC cutting oil.