Android – ListView – 4 – Custom ListView
-
Paresh Mayani
- July 12, 2011
- 1 min read
- 18 Comments
Problem: Android – ListView with Two TextViews and ImageView
Welcome to the Part 4 of ListView series. So far this series:
- Part 1 – Simple ListView
- Part 2 – ListView with Two TextView
- Part 3 – ListView with Two TextView and One ImageView
This part is just an extended part of Part 3, where we discussed about taking ImageView into each items. In this part, we will see how we can display different images into the ImageView in every items.
For example:
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/listView4"
android:layout_alignParentLeft="true">
</ListView>
</RelativeLayout>
listitem_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dip">
<ImageView
android:layout_width="50dip"
android:layout_height="50dip"
android:id="@+id/imgViewLogo"
android:src="@drawable/icon"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:scaleType="center">
</ImageView>
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_width="wrap_content"
android:id="@+id/txtViewTitle"
android:layout_toRightOf="@+id/imgViewLogo"
android:layout_marginLeft="2dip">
</TextView>
<TextView
android:layout_height="wrap_content"
android:text="TextView"
android:layout_width="wrap_content"
android:id="@+id/txtViewDescription"
android:layout_toRightOf="@+id/imgViewLogo"
android:layout_below="@+id/txtViewTitle"
android:layout_marginLeft="2dip">
</TextView>
</RelativeLayout>
ListView4Activity.java
package com.technotalkative.customlistview4;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
public class ListView4Activity extends Activity implements OnItemClickListener
{
/** Called when the activity is first created. */
ListView lview3;
ListViewCustomAdapter adapter;
private static String month[] = {"Add","Delete","Down","Information","Help",
"Download","Mail","Search","Settings"};
private static String desc[] = {"Add desc","Delete desc","Down desc",
"Information desc","Help desc","Download desc","Mail desc",
"Search desc","Settings desc"};
private static int icons[] = {R.drawable.ic_add, R.drawable.ic_delete,
R.drawable.ic_down, R.drawable.ic_info, R.drawable.ic_help,
R.drawable.ic_download, R.drawable.ic_mail,
R.drawable.ic_search, R.drawable.ic_settings};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
lview3 = (ListView) findViewById(R.id.listView4);
adapter = new ListViewCustomAdapter(this, month, desc, icons);
lview3.setAdapter(adapter);
lview3.setOnItemClickListener(this);
}
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
// TODO Auto-generated method stub
Toast.makeText(this, "Title => "+month[position]+" n Description => "+desc[position], Toast.LENGTH_SHORT).show();
}
}
ListViewCustomAdapter.java
package com.technotalkative.customlistview4;
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 ListViewCustomAdapter extends BaseAdapter
{
public String title[];
public String description[];
public int images[];
public Activity context;
public LayoutInflater inflater;
public ListViewCustomAdapter(Activity context,String[] title, String[] description, int[] images) {
super();
this.context = context;
this.title = title;
this.description = description;
this.images = images;
this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return title.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
public static class ViewHolder
{
ImageView imgViewLogo;
TextView txtViewTitle;
TextView txtViewDescription;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ViewHolder holder;
if(convertView==null)
{
holder = new ViewHolder();
convertView = inflater.inflate(R.layout.listitem_row, null);
holder.imgViewLogo = (ImageView) convertView.findViewById(R.id.imgViewLogo);
holder.txtViewTitle = (TextView) convertView.findViewById(R.id.txtViewTitle);
holder.txtViewDescription = (TextView) convertView.findViewById(R.id.txtViewDescription);
convertView.setTag(holder);
}
else
holder=(ViewHolder)convertView.getTag();
holder.imgViewLogo.setImageResource(images[position]);
holder.txtViewTitle.setText(title[position]);
holder.txtViewDescription.setText(description[position]);
return convertView;
}
}
Note: Create “drawable” folder inside the android application, store the same images inside it.
