Android ListView example with Image 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 :

package com.jsupport.listviewimages;

public class ItemDetails {

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getItemDescription() {
return itemDescription;
}
public void setItemDescription(String itemDescription) {
this.itemDescription = itemDescription;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public int getImageNumber() {
return imageNumber;
}
public void setImageNumber(int imageNumber) {
this.imageNumber = imageNumber;
}

private String name ;
private String itemDescription;
private String price;
private int imageNumber;


}

ItemListBaseAdapter

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

package com.jsupport.listviewimages;

import java.util.ArrayList;


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 ItemListBaseAdapter extends BaseAdapter {
 private static ArrayList<ItemDetails> itemDetailsrrayList;
 
 private Integer[] imgid = {
   R.drawable.p1,
   R.drawable.bb2,
   R.drawable.p2,
   R.drawable.bb5,
   R.drawable.bb6,
   R.drawable.d1
   };
 
 private LayoutInflater l_Inflater;

 public ItemListBaseAdapter(Context context, ArrayList<ItemDetails> results) {
  itemDetailsrrayList = results;
  l_Inflater = LayoutInflater.from(context);
 }

 public int getCount() {
  return itemDetailsrrayList.size();
 }

 public Object getItem(int position) {
  return itemDetailsrrayList.get(position);
 }

 public long getItemId(int position) {
  return position;
 }

 public View getView(int position, View convertView, ViewGroup parent) {
  ViewHolder holder;
  if (convertView == null) {
   convertView = l_Inflater.inflate(R.layout.item_details_view, null);
   holder = new ViewHolder();
   holder.txt_itemName = (TextView) convertView.findViewById(R.id.name);
   holder.txt_itemDescription = (TextView) convertView.findViewById(R.id.itemDescription);
   holder.txt_itemPrice = (TextView) convertView.findViewById(R.id.price);
   holder.itemImage = (ImageView) convertView.findViewById(R.id.photo);

   convertView.setTag(holder);
  } else {
   holder = (ViewHolder) convertView.getTag();
  }
  
  holder.txt_itemName.setText(itemDetailsrrayList.get(position).getName());
  holder.txt_itemDescription.setText(itemDetailsrrayList.get(position).getItemDescription());
  holder.txt_itemPrice.setText(itemDetailsrrayList.get(position).getPrice());
  holder.itemImage.setImageResource(imgid[itemDetailsrrayList.get(position).getImageNumber() - 1]);

  return convertView;
 }

 static class ViewHolder {
  TextView txt_itemName;
  TextView txt_itemDescription;
  TextView txt_itemPrice;
  ImageView itemImage;
 }
}

ListViewImagesActivity

package com.jsupport.listviewimages;

import java.util.ArrayList;

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 ListViewImagesActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

ArrayList<ItemDetails> image_details = GetSearchResults();

final ListView lv1 = (ListView) findViewById(R.id.listV_main);
lv1.setAdapter(new ItemListBaseAdapter(this, image_details));

lv1.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> a, View v, int position, long id) {
Object o = lv1.getItemAtPosition(position);
ItemDetails obj_itemDetails = (ItemDetails)o;
Toast.makeText(ListViewImagesActivity.this, 'You have chosen : ' + ' ' + obj_itemDetails.getName(), Toast.LENGTH_LONG).show();
} 
});
}

private ArrayList<ItemDetails> GetSearchResults(){
ArrayList<ItemDetails> results = new ArrayList<ItemDetails>();

ItemDetails item_details = new ItemDetails();
item_details.setName('Pizza');
item_details.setItemDescription('Spicy Chiken Pizza');
item_details.setPrice('RS 310.00');
item_details.setImageNumber(1);
results.add(item_details);

item_details = new ItemDetails();
item_details.setName('Burger');
item_details.setItemDescription('Beef Burger');
item_details.setPrice('RS 350.00');
item_details.setImageNumber(2);
results.add(item_details);

item_details = new ItemDetails();
item_details.setName('Pizza');
item_details.setItemDescription('Chiken Pizza');
item_details.setPrice('RS 250.00');
item_details.setImageNumber(3);
results.add(item_details);

item_details = new ItemDetails();
item_details.setName('Burger');
item_details.setItemDescription('Chicken Burger');
item_details.setPrice('RS 350.00');
item_details.setImageNumber(4);
results.add(item_details);

item_details = new ItemDetails();
item_details.setName('Burger');
item_details.setItemDescription('Fish Burger');
item_details.setPrice('RS 310.00');
item_details.setImageNumber(5);
results.add(item_details);

item_details = new ItemDetails();
item_details.setName('Mango');
item_details.setItemDescription('Mango Juice');
item_details.setPrice('RS 250.00');
item_details.setImageNumber(6);
results.add(item_details);


return results;
}
}

Download the complete project: Android ListView

Happy coding and don’t forget to share!

Reference: Android ListView example with Image and Text from our JCG partner Chathura Wijesinghe at the Java Sri Lankan Support blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

15 Responses to "Android ListView example with Image and Text"

  1. Lawrence M says:

    Perfect! Just what I was after. Thanks you for posting this!

  2. Akash says:

    Thank u very much..

  3. jana says:

    can any one help me to connect this page with another page containing some details about it..

  4. yusup says:

    thanks it so helped me…
    my project can done..

    for jana, maybe i can help you
    because my project some with what your project make
    if you want to know you can emails me yusupcahyono@gmail.com

  5. The simplest and cleanest custom ListView that I have seen on the web! Thanks!

  6. Akshay says:

    I want above all elements in Expandable List View by categorizing them as Soups,snacks etc How to do that??

  7. SUSHMITA SARKAR says:

    This application is not running on my emulator. It loads, installs but during the Start Intent activity it shows error in logcat and displays “This application has stopped”. What should I do now??

  8. kholod says:

    what about the xml files!!! the project doesn’t contain the xml and manifest , its all empty

  9. ninju says:

    this is not applicable.
    this seems errror to my project

  10. padam says:

    good example.
    but showing error while scrolling down as—-

    E/AndroidRuntime(1281): java.lang.ArrayIndexOutOfBoundsException: length=9; index=9

  11. mark says:

    how about if i want to randomize the images?

Leave a Reply


− 8 = one



Java Code Geeks and all content copyright © 2010-2015, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

Get ready to Rock!
To download the books, please verify your email address by following the instructions found on the email we just sent you.

THANK YOU!

Close