WhatsApp like Custom ListView with Image and Text Using BaseAdapter

n this post , we will see an example of the customized List View which looks like whatsapp contact list ,in the previous series where i have already discussed about Simple ListView and Custom ListView using array adapter , In this tutorial i am using base adapter to achieve the design , so here each item of list view contains one ImageView and three TextView ,Below is the diagrammatic representation of the Final View.

Lets See An Example

Project Detail

Project Name	MyListView
Package	com.pavan.mylistview
Minimum SDK	API 8
Target SDK	API 17
Theme	Holo Light with Dark Action Bar

String Constant

Before i start coding i have intialized the array constants ( member_names , profile_pics , statues , contactType  ) inside res/strings.xml . and also i  have kept  all the images inside the drawable folder which you  can find in the download source code below .

file : string.xml

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

    <string name="app_name">MyListView</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

    <!-- Names -->
    <string-array name="Member_names">
        <item>Pavan D</item>
        <item>DayaSagar</item>
        <item>Pavan B</item>
        <item>Maddy</item>
        <item>Pavan H</item>
        <item>Nikhil</item>
    </string-array>

    <!-- Pictures -->
    <array name="profile_pics">
        <item>@drawable/pavand_pic</item>
        <item>@drawable/daya_pic</item>
        <item>@drawable/pavanb_pic</item>
        <item>@drawable/maddy_pic</item>
        <item>@drawable/pavanh_pic</item>
        <item>@drawable/nikhil_pic</item>
    </array>

    <!-- Status -->
    <string-array name="statues">
        <item>Blogging</item>
        <item>Available</item>
        <item>Busy</item>
        <item>In a meeting</item>
        <item>At work</item>
        <item>At gym</item>
    </string-array>

    <!-- contact type -->
    <string-array name="contactType">
        <item>Mobile</item>
        <item>Work</item>
        <item>Home</item>
        <item>Work</item>
        <item>Mobile</item>
        <item>Mobile</item>
    </string-array>

</resources>

XML Layout

Create a main layout which contains LinearLayout as parent view and add ListView as a child to it .

file : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     />
</LinearLayout>

Create list_item.xml inside layout directory ,this layout is used to defines the design of each row items in a list view

file : list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="2dp" >

    <ImageView
        android:id="@+id/profile_pic"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:contentDescription="desc"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" />

    <TextView
        android:id="@+id/member_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/profile_pic"
        android:paddingBottom="10dp"
        android:text="txt"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/member_name"
        android:layout_below="@+id/member_name"
        android:text="txt"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/contact_type"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/member_name"
        android:layout_alignBottom="@+id/member_name"
        android:layout_alignParentRight="true"
        android:text="txt"
        android:textSize="16sp" />

</RelativeLayout>

Bean Class

Create a Bean Class RowItem which is used for setting and getting row data's of each items in ListView ( member_name , profile_pic_id, status, contactType ) .

file : RowItem.java

package com.pavan.mylistview;

public class RowItem {

 private String member_name;
 private int profile_pic_id;
 private String status;
 private String contactType;

 public RowItem(String member_name, int profile_pic_id, String status,
   String contactType) {

  this.member_name = member_name;
  this.profile_pic_id = profile_pic_id;
  this.status = status;
  this.contactType = contactType;
 }

 public String getMember_name() {
  return member_name;
 }

 public void setMember_name(String member_name) {
  this.member_name = member_name;
 }

 public int getProfile_pic_id() {
  return profile_pic_id;
 }

 public void setProfile_pic_id(int profile_pic_id) {
  this.profile_pic_id = profile_pic_id;
 }

 public String getStatus() {
  return status;
 }

 public void setStatus(String status) {
  this.status = status;
 }

 public String getContactType() {
  return contactType;
 }

 public void setContactType(String contactType) {
  this.contactType = contactType;
 }

}

Adapter

Create a custom adapter which extends BaseAdapter , this is used for inflating each row items of the listview

file :CustomAdapter.java

package com.pavan.mylistview;

import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {

 Context context;
 List&lt;RowItem&gt; rowItems;

 CustomAdapter(Context context, List&lt;RowItem&gt; rowItems) {
  this.context = context;
  this.rowItems = rowItems;
 }

 @Override
 public int getCount() {
  return rowItems.size();
 }

 @Override
 public Object getItem(int position) {
  return rowItems.get(position);
 }

 @Override
 public long getItemId(int position) {
  return rowItems.indexOf(getItem(position));
 }

 /* private view holder class */
 private class ViewHolder {
  ImageView profile_pic;
  TextView member_name;
  TextView status;
  TextView contactType;
 }

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

  ViewHolder holder = null;

  LayoutInflater mInflater = (LayoutInflater) context
    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
  if (convertView == null) {
   convertView = mInflater.inflate(R.layout.list_item, null);
   holder = new ViewHolder();

   holder.member_name = (TextView) convertView
     .findViewById(R.id.member_name);
   holder.profile_pic = (ImageView) convertView
     .findViewById(R.id.profile_pic);
   holder.status = (TextView) convertView.findViewById(R.id.status);
   holder.contactType = (TextView) convertView
     .findViewById(R.id.contact_type);

   RowItem row_pos = rowItems.get(position);

   holder.profile_pic.setImageResource(row_pos.getProfile_pic_id());
   holder.member_name.setText(row_pos.getMember_name());
   holder.status.setText(row_pos.getStatus());
   holder.contactType.setText(row_pos.getContactType());

   convertView.setTag(holder);
  } else {
   holder = (ViewHolder) convertView.getTag();
  }

  return convertView;
 }

}

Activity

Finally In the main activity inside the onCreate method set the content of the view with main layout(R.layout.activity_main) which is defined above and set the above defined custom adapter for ListView .

file : MainActivity.java

package com.pavan.mylistview;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class MainActivity extends Activity implements OnItemClickListener {

 String[] member_names;
 TypedArray profile_pics;
 String[] statues;
 String[] contactType;

 List<RowItem> rowItems;
 ListView mylistview;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  rowItems = new ArrayList<RowItem>();

  member_names = getResources().getStringArray(R.array.Member_names);

  profile_pics = getResources().obtainTypedArray(R.array.profile_pics);

  statues = getResources().getStringArray(R.array.statues);

  contactType = getResources().getStringArray(R.array.contactType);

  for (int i = 0; i < member_names.length; i++) {
   RowItem item = new RowItem(member_names[i],
     profile_pics.getResourceId(i, -1), statues[i],
     contactType[i]);
   rowItems.add(item);
  }

  mylistview = (ListView) findViewById(R.id.list);
  CustomAdapter adapter = new CustomAdapter(this, rowItems);
  mylistview.setAdapter(adapter);
  profile_pics.recycle();
  mylistview.setOnItemClickListener(this);

 }

 @Override
 public void onItemClick(AdapterView<?> parent, View view, int position,
   long id) {

  String member_name = rowItems.get(position).getMember_name();
  Toast.makeText(getApplicationContext(), "" + member_name,
    Toast.LENGTH_SHORT).show();
 }

}

Download Code