Geeks With Blogs

Bill Osuch - Random geek notes

In a previous post I showed how to create a custom Android ListView that was bound to an ArrayList. I've had a few people ask how to include images in the ListView, so here it is. We’ll do this by adding an ImageView to the repeating layout (each row of data) and populating it at the same time the name and other information are populated.

First, start with a working version of the previous tutorial. You can download the full Eclipse file here: ListViewBlogPost.zip

The first thing we're going to do is change the layout file. This isn't mandatory, but I want the picture to be to the left of the text, which wouldn't be possible in a linear layout. Replace the xml in custom_row_view.xml with this:

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <ImageView
      android:id="@+id/photo"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:paddingRight="15dp"
      android:paddingTop="10dp" />
   <TextView android:id="@+id/name"
      android:textSize="14sp"
      android:textStyle="bold"
      android:textColor="#FFFF00"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@id/photo"/>
   <TextView android:id="@+id/cityState"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/name"
      android:layout_toRightOf="@id/photo" />
   <TextView android:id="@+id/phone"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/cityState"
      android:layout_toRightOf="@id/photo" />
</RelativeLayout>

Next you'll need to drop your images into the res/drawable directory. In real life you'd want to drop different size images into drawable-hdpi, drawable-ldpi and drawable-mdpi, but just putting them in the one directory is good enough for this example.

Now, add a get and set to the SearchResults class to allow you to set the image number for each item:

private int imageNumber = 0;

public void setImageNumber(int imageNumber) {
    this.imageNumber = imageNumber;
}
public int getImageNumber() {
    return imageNumber;
}

Next you'll modify the MyCustomBaseAdapter.java file. First add an Integer array with a list of your image names:

private Integer[] imgid = {
    R.drawable.smiley1a,
    R.drawable.smiley2a,
    R.drawable.smiley3a
};

Then change the ViewHolder class (the new code is in bold):

static class ViewHolder {
    TextView txtName;
    TextView txtCityState;
    TextView txtPhone;
    ImageView imgPhoto;
}

And finally the getView method:

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;
    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.custom_row_view, null);
        holder = new ViewHolder();
        holder.txtName = (TextView) convertView.findViewById(R.id.name);
        holder.txtCityState = (TextView) convertView.findViewById(R.id.cityState);
        holder.txtPhone = (TextView) convertView.findViewById(R.id.phone);
        holder.imgPhoto = (ImageView) convertView.findViewById(R.id.photo);

        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }
        holder.txtName.setText(searchArrayList.get(position).getName());
        holder.txtCityState.setText(searchArrayList.get(position).getCityState());
        holder.txtPhone.setText(searchArrayList.get(position).getPhone());
        holder.imgPhoto.setImageResource(imgid[searchArrayList.get(position).getImageNumber() - 1]);

        return convertView;
}

Notice that all we’re doing there is setting the image resource to one of the items in the imgid array.

Finally, set the image number for each row in the ListView in the GetSearchResults method of your main activity:

private ArrayList<SearchResults> GetSearchResults(){
    ArrayList<SearchResults> results = new ArrayList<SearchResults>();
       
    SearchResults sr1 = new SearchResults();
    sr1.setName("John Smith");
    sr1.setCityState("Dallas, TX");
    sr1.setPhone("214-555-1234");
    sr1.setImageNumber(1);
    results.add(sr1);
       
    sr1 = new SearchResults();
    sr1.setName("Jane Doe");
    sr1.setCityState("Atlanta, GA");
    sr1.setPhone("469-555-2587");
    sr1.setImageNumber(2);
    results.add(sr1);
       
    sr1 = new SearchResults();
    sr1.setName("Steve Young");
    sr1.setCityState("Miami, FL");
    sr1.setPhone("305-555-7895");
    sr1.setImageNumber(3);
    results.add(sr1);
       
    return results;
}

Fire up the emulator, and it should look something like this:

ListViewImages

Of course, there are lots of other ways of populating the ImageView in each row, but once you understand the basics it should be easy to change.

You can download the full Eclipse project at: ListViewImagesBlogPost.zip

Technorati Tags:

Posted on Friday, February 24, 2012 3:45 PM Android | Back to top


Comments on this post: Android tutorial–Adding images to your custom multi-line ListView

# re: Android tutorial–Adding images to your custom multi-line ListView
Requesting Gravatar...
First, thanks for this tutorial, i've been followed your tutorial, but can i retrieving data from database e.g MySql then display in multi-line ListView?
Left by ahromi on Mar 13, 2012 1:24 AM

# re: Android tutorial–Adding images to your custom multi-line ListView
Requesting Gravatar...
Mine is crashing and in the DDMS, it's not saying any spot where it's crashing. Also, which version of eclipse are you using?
Left by Dylan on Aug 14, 2012 11:01 AM

Your comment:
 (will show your gravatar)


Copyright © Bill Osuch | Powered by: GeeksWithBlogs.net