Question

I’m trying to create a listView so that each item inside the list is composed of a TextView and one (or more) ImageView.

So far I’ve managed to get the listView to work with items that are only TextViews by using a ArrayList<String> and a ArrayAdapter<String>adapter.

Is there a way to achieve what I want? And would other ways be easier? (Like using TableRows, but I’m not sure if they can be configured to have the onClickListener)

Answer 1

Create a `list_items.xml` with a layout like this:

<LinearLayout
    android:orientation="horizontal"
    [...]
     <ImageView
        [...]
        android:id="@+id/myimage"/>
     <TextView
        [...]            
        android:id="@+id/mytext"/>
</LinearLayout>

Then create a BaseAdapter:

  class MyAdapter extends BaseAdapter {

     private Context context;
     private LayoutInflater inflater;
     private ViewHolder holder;
     private ArrayList<HashMap<String, String>> data;

     public MyAdapter(Context context, ArrayList<HashMap<String, String>> data) {
         this.context = context;
         this.data = data;
         inflater = LayoutInflater.from(context);
     }

     // Below the Magic
     public View getView(int position, View convertView, ViewGroup parent) {
         inflater = (LayoutInflater)    context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

          if(convertView == null || convertView.getTag() == null) {
              // Here you load the list_items.xml an inflate your Layout with it
              convertView = inflater.inflate(R.layout.list_items, null);

              holder = new ViewHolder();
              holder.text = (TextView) convertView.findViewById(R.id.mytext);
              holder.image = (ImageView) convertView.findViewById(R.id.myimage);

              convertView.setTag(holder);

           } else {             
              holder = (ViewHolder) convertView.getTag();
           }

           // We get the HashMap for our current Position in the ListView 
           row = data.get(position);

           if(row != null) {
               holder.text.setText(row.get("test"));
               // Below could be setImageBitmap, setImageResource,...
               // depends on how you get your image
               holder.image.setImageBitmap(getImage(row.get("image"));
           }

           return convertView;
       }

       class ViewHolder {
           TextView text;
           ImageView image;
       }

 }

 public getImage(String image) {
      // Get your image from where you want it SD, drawable, internet)
 }

An call it like this:

MyAdapter myAdapter = new MyAdapter(this, data);
myListView.setAdapter(myAdapter);

I am assuming that your pass your data in an ArrayList containing a HashMap for each row:

   #ListItem1 = data(0) - data.get(0).get("title"), data.get(0).get("image")
   #ListItem2 = data(1) - data.get(1).get("title"), data.get(1).get("image")