WhatsApp like Custom ListView with Image and Text and Buttons Using BaseAdapter
In 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 with Buttons,Below is the diagrammatic representation of the Final View.
Step 1 : Select File -> New -> Project -> Android Application Project (or) Android Project. Fill the forms and click "Finish" button. If you have any doubt regarding create a new project Click Here.
Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_marginTop="4dp"
android:text="@string/h_multi"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView1" >
</ListView>
</RelativeLayout>
<?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" >
<Button
android:id="@+id/button1"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#FFFFFF"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Edit Data"
android:textColor="#0099CC" />
<Button
android:id="@+id/button2"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_below="@+id/button1"
android:layout_marginTop="3dp"
android:background="#FFFFFF"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Delete"
android:textColor="#0099CC" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/textView1"
android:text="Address"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="16sp" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button2"
android:layout_alignBottom="@+id/button2"
android:layout_alignLeft="@+id/textView2"
android:text="Location" />
<ImageView
android:id="@+id/imageview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="@drawable/amazon" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_centerHorizontal="true"
android:text="User Name"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Step 4 : Open src -> package -> MainActivity.java and add following code :
package com.gudivada.hemanthsomaraju;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ListView;
public class MainActivity extends Activity {
ListView userList;
UserCustomAdapter userAdapter;
ArrayList<User> userArray = new ArrayList<User>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
userArray.add(new User(R.drawable.amazon, "Amazon", "India", "kakinada"));
userArray.add(new User(R.drawable.android, "Android", "India", "kakinada"));
userArray.add(new User(R.drawable.apple, "Apple", "India", "Kakinada"));
userArray.add(new User(R.drawable.ask, "Ask", "India", "Kakinada"));
userArray.add(new User(R.drawable.dropbox, "Dropbox", "India", "Kakinada"));
userArray.add(new User(R.drawable.email, "Gmail", "India", "Kakinada"));
userArray.add(new User(R.drawable.fb, "Facebook", "India", "Kakinada"));
userArray.add(new User(R.drawable.google, "Google", "India", "Kakinada"));
userArray.add(new User(R.drawable.linkedin, "Linkedin", "India", "Kakinada"));
userArray.add(new User(R.drawable.twitter, "Twitter", "India", "Kakinada"));
userAdapter = new UserCustomAdapter(MainActivity.this, R.layout.viewrow,
userArray);
userList = (ListView) findViewById(R.id.listView1);
userList.setItemsCanFocus(false);
userList.setAdapter(userAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Step 5 : Open src -> package -> User.java and add following code :
package com.gudivada.hemanthsomaraju;
public class User {
int iconid;
String name;
String address;
String location;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getLocation() {
return location;
}
public void setLocation(String location) {
this.location = location;
}
public int iconid() {
return iconid;
}
public void seticonid(int iconid) {
this.iconid = iconid;
}
public User(int iconid, String name, String address, String location) {
super();
this.iconid=iconid;
this.name = name;
this.address = address;
this.location = location;
}
}
Step 6 : Open src -> package -> UserCustomAdapter.java and add following code :
package com.gudivada.hemanthsomaraju;
import java.util.ArrayList;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class UserCustomAdapter extends ArrayAdapter<User> {
Context context;
int layoutResourceId;
ArrayList<User> data = new ArrayList<User>();
public UserCustomAdapter(Context context, int layoutResourceId,
ArrayList<User> data) {
super(context, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.context = context;
this.data = data;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
UserHolder holder = null;
if (row == null) {
LayoutInflater inflater = ((MainActivity) context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new UserHolder();
holder.textName = (TextView) row.findViewById(R.id.textView1);
holder.textAddress = (TextView) row.findViewById(R.id.textView2);
holder.textLocation = (TextView) row.findViewById(R.id.textView3);
holder.btnEdit = (Button) row.findViewById(R.id.button1);
holder.btnDelete = (Button) row.findViewById(R.id.button2);
holder.imageView = (ImageView) row.findViewById(R.id.imageview1);
row.setTag(holder);
}
else {
holder = (UserHolder) row.getTag();
}
User user = data.get(position);
holder.textName.setText(user.getName());
holder.textAddress.setText(user.getAddress());
holder.textLocation.setText(user.getLocation());
holder.imageView.setImageResource(user.iconid());
holder.btnEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.i("Edit Button Clicked", "**********");
Toast.makeText(context, "Edit button Clicked",
Toast.LENGTH_LONG).show();
}
});
holder.btnDelete.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.i("Delete Button Clicked", "**********");
Toast.makeText(context, "Delete button Clicked",
Toast.LENGTH_LONG).show();
}
});
holder.imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.i("image Clicked", "**********");
Toast.makeText(context, "image Clicked",
Toast.LENGTH_LONG).show();
}
});
return row;
}
static class UserHolder {
TextView textName;
TextView textAddress;
TextView textLocation;
Button btnEdit;
Button btnDelete;
ImageView imageView;
}
}
Step 7 : Open AndroidManifest.xml and add following code :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.gudivada.hemanthsomaraju"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.gudivada.hemanthsomaraju.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Hemanth Somaraju</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="h_multi">Multi Text List View</string>
</resources>
Step 9 : Our output will be like this :
