Tutorial details

Android ListView example with Image and Text | App Code for Sale | Preview

Android ListView example with Image and Text | Android Tutorial

How to create an Android ListView with images and text

Overview PAGE TOP

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.PNG

Android List View example on Samsung Galaxy Y s5360

Android_List_View_example_on_Samsung_Galaxy_Y_s5360.jpg

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!

Reference PAGE TOP

http://www.javacodegeeks.com/2012/10/android-listview-example-with-image-and.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.