Laís Minchillo
Laís Minchillo

Reputation: 761

Using listView with composed elements

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)

Upvotes: 0

Views: 140

Answers (4)

The HCD
The HCD

Reputation: 510

I've uploaded all code from my aps that may do what you need. download and use as you like:

https://github.com/billmcnamara/BarcelonaTravelGuide.Android

Upvotes: 1

Delpes
Delpes

Reputation: 1050

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")

Upvotes: 1

takecare
takecare

Reputation: 1873

You can provide a custom view via your ListView's Arraydapter (you can extend the ArrayAdapter to create your own). On your other question, yes, it's possible to make TableRows clickable (you can do this on your XML layout file, for example).

Upvotes: 1

Raghunandan
Raghunandan

Reputation: 133560

You should use a custom List view. http://www.androidpeople.com/android-custom-listview-tutorial-part-1. Have a look at the link.

  @Override
   public int getItemViewType(int position) 
   {
    int type;
    if (ID.get(position)== 0){
    type = TYPE_ITEM1;  //type 0 for image
   } 
     else if (ID.get(position) == 1){
    type = TYPE_ITEM2; //type 1 for text
   }else {
    type = TYPE_ITEM3; //type 2 for videos
 }
 return type;
 }
 @Override
  public int getViewTypeCount() {
 return 3;    //three different layouts to be inflated
}

Upvotes: 2

Related Questions