In this tutorial I am going to show you how to create an Android ListView with images and text. You will learn how to load an image from a resource and how to set text to TextView . Here is the screenshot of the finished ListView.

Android List View example on Samsung Galaxy Y s5360

ItemDetails class will help us to set and get item data :

01  package com.jsupport.listviewimages;
02  
03  public class ItemDetails {
04  
05  public String getName() {
06  return name;
07  }
08  public void setName(String name) {
09  this.name = name;
10  }
11  public String getItemDescription() {
12  return itemDescription;
13  }
14  public void setItemDescription(String itemDescription) {
15  this.itemDescription = itemDescription;
16  }
17  public String getPrice() {
18  return price;
19  }
20  public void setPrice(String price) {
21  this.price = price;
22  }
23  public int getImageNumber() {
24  return imageNumber;
25  }
26  public void setImageNumber(int imageNumber) {
27  this.imageNumber = imageNumber;
28  }
29  
30  private String name ;
31  private String itemDescription;
32  private String price;
33  private int imageNumber;
34  
35  
36  }

ItemListBaseAdapter

Which is extended from the BaseAdapter and sets item details and the image

01  package com.jsupport.listviewimages;
02  
03  import java.util.ArrayList;
04  
05  
06  import android.content.Context;
07  import android.view.LayoutInflater;
08  import android.view.View;
09  import android.view.ViewGroup;
10  import android.widget.BaseAdapter;
11  import android.widget.ImageView;
12  import android.widget.TextView;
13  
14  public class ItemListBaseAdapter extends BaseAdapter {
15   private static ArrayList<ItemDetails> itemDetailsrrayList;
16    
17   private Integer[] imgid = {
18     R.drawable.p1,
19     R.drawable.bb2,
20     R.drawable.p2,
21     R.drawable.bb5,
22     R.drawable.bb6,
23     R.drawable.d1
24     };
25    
26   private LayoutInflater l_Inflater;
27  
28   public ItemListBaseAdapter(Context context, ArrayList<ItemDetails> results) {
29    itemDetailsrrayList = results;
30    l_Inflater = LayoutInflater.from(context);
31   }
32  
33   public int getCount() {
34    return itemDetailsrrayList.size();
35   }
36  
37   public Object getItem(int position) {
38    return itemDetailsrrayList.get(position);
39   }
40  
41   public long getItemId(int position) {
42    return position;
43   }
44  
45   public View getView(int position, View convertView, ViewGroup parent) {
46    ViewHolder holder;
47    if (convertView == null) {
48     convertView = l_Inflater.inflate(R.layout.item_details_view, null);
49     holder = new ViewHolder();
50     holder.txt_itemName = (TextView) convertView.findViewById(R.id.name);
51     holder.txt_itemDescription = (TextView) convertView.findViewById(R.id.itemDescription);
52     holder.txt_itemPrice = (TextView) convertView.findViewById(R.id.price);
53     holder.itemImage = (ImageView) convertView.findViewById(R.id.photo);
54  
55     convertView.setTag(holder);
56    } else {
57     holder = (ViewHolder) convertView.getTag();
58    }
59     
60    holder.txt_itemName.setText(itemDetailsrrayList.get(position).getName());
61    holder.txt_itemDescription.setText(itemDetailsrrayList.get(position).getItemDescription());
62    holder.txt_itemPrice.setText(itemDetailsrrayList.get(position).getPrice());
63    holder.itemImage.setImageResource(imgid[itemDetailsrrayList.get(position).getImageNumber() - 1]);
64  
65    return convertView;
66   }
67  
68   static class ViewHolder {
69    TextView txt_itemName;
70    TextView txt_itemDescription;
71    TextView txt_itemPrice;
72    ImageView itemImage;
73   }
74  }

ListViewImagesActivity

01  package com.jsupport.listviewimages;
02  
03  import java.util.ArrayList;
04  
05  import android.app.Activity;
06  import android.os.Bundle;
07  import android.view.View;
08  import android.widget.AdapterView;
09  import android.widget.ListView;
10  import android.widget.Toast;
11  import android.widget.AdapterView.OnItemClickListener;
12  
13  public class ListViewImagesActivity extends Activity {
14  /** Called when the activity is first created. */
15  @Override
16  public void onCreate(Bundle savedInstanceState) {
17  super.onCreate(savedInstanceState);
18  setContentView(R.layout.main);
19  
20  ArrayList<ItemDetails> image_details = GetSearchResults();
21  
22  final ListView lv1 = (ListView) findViewById(R.id.listV_main);
23  lv1.setAdapter(new ItemListBaseAdapter(this, image_details));
24  
25  lv1.setOnItemClickListener(new OnItemClickListener() {
26  @Override
27  public void onItemClick(AdapterView<?> a, View v, int position, long id) {
28  Object o = lv1.getItemAtPosition(position);
29  ItemDetails obj_itemDetails = (ItemDetails)o;
30  Toast.makeText(ListViewImagesActivity.this, 'You have chosen : ' + ' ' + obj_itemDetails.getName(), Toast.LENGTH_LONG).show();
31  }
32  });
33  }
34  
35  private ArrayList<ItemDetails> GetSearchResults(){
36  ArrayList<ItemDetails> results = new ArrayList<ItemDetails>();
37  
38  ItemDetails item_details = new ItemDetails();
39  item_details.setName('Pizza');
40  item_details.setItemDescription('Spicy Chiken Pizza');
41  item_details.setPrice('RS 310.00');
42  item_details.setImageNumber(1);
43  results.add(item_details);
44  
45  item_details = new ItemDetails();
46  item_details.setName('Burger');
47  item_details.setItemDescription('Beef Burger');
48  item_details.setPrice('RS 350.00');
49  item_details.setImageNumber(2);
50  results.add(item_details);
51  
52  item_details = new ItemDetails();
53  item_details.setName('Pizza');
54  item_details.setItemDescription('Chiken Pizza');
55  item_details.setPrice('RS 250.00');
56  item_details.setImageNumber(3);
57  results.add(item_details);
58  
59  item_details = new ItemDetails();
60  item_details.setName('Burger');
61  item_details.setItemDescription('Chicken Burger');
62  item_details.setPrice('RS 350.00');
63  item_details.setImageNumber(4);
64  results.add(item_details);
65  
66  item_details = new ItemDetails();
67  item_details.setName('Burger');
68  item_details.setItemDescription('Fish Burger');
69  item_details.setPrice('RS 310.00');
70  item_details.setImageNumber(5);
71  results.add(item_details);
72  
73  item_details = new ItemDetails();
74  item_details.setName('Mango');
75  item_details.setItemDescription('Mango Juice');
76  item_details.setPrice('RS 250.00');
77  item_details.setImageNumber(6);
78  results.add(item_details);
79  
80  
81  return results;
82  }
83  }

Download the complete project: Android ListView

Happy coding and don’t forget to share!