How to create an Android ListView with images and text
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!
http://www.javacodegeeks.com/2012/10/android-listview-example-with-image-and.html
Please login in order to leave a comment.