- 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);
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));
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.