ArrayAdapter text and image

Question

In my activity I implement a list which contains the names of some files. Every list's item refers to a layout in which I'd like to show the name of the images and a thumbnail of the image referenced. Ican show the the name using an ArrayAdapter but i don't know hot to insert the image thumbnail. All the image referenced stay in sd_card and i have the path of they. Here is the single row layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" >

<ImageView
    android:id="@+id/imageView"
    android:layout_width="36dp"
    android:layout_height="wrap_content"
    android:src="@drawable/btn_nav_background_default" />

<TextView
    android:id="@+id/titoloTv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

and the layout of the activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<Button
    android:id="@+id/creaButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Crea una nuova realtà aumentata" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Ar già create"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


</ListView>

</LinearLayout>

and the activity code inherent adapter.

    ArrayAdapter<?> arrayAdapter = new ArrayAdapter<String>(this,R.layout.row,R.id.titoloTv,targetName);
    listView.setAdapter(arrayAdapter);

    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
           @Override  
           public void onItemClick(AdapterView<?> adapter, final View componente, int pos, long id){

...................            
           } 

    }); 

I'm trying using this but doesn't work properly.

    String tempTarget;
    List<Map<String,Object>> data = new ArrayList<Map<String,Object>>();

   for(int i = 0; i<ARelements.size();i++){
        Element ar = arIterator.next();

        Map<String,Object> map = new HashMap<String,Object>(2);
        tempTarget = ar.getAttributeValue("TARGET");
        thumbnailBitmap = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(tempTarget), THUMBSIZE, THUMBSIZE);
        map.put("thumbnail", thumbnailBitmap);
        map.put("titolo", tempTarget);
        data.add(map);
    }
   arIterator= null;

   SimpleAdapter simpleAdapter = new SimpleAdapter(this,data,R.layout.row,new String[] {"thumbnail","titolo"},new int[] {R.id.imageView, R.id.titoloTv});


    listView.setAdapter(simpleAdapter);

Answer 1

You need to implement a custom array adapter and specify that imageview and textview layout/id(s) in the adapter.

Something like:

  public class CustomListViewAdapter extends ArrayAdapter<RowItem> {


    Context context;

    public CustomListViewAdapter(Context context, int resourceId, //resourceId=your layout
            List<RowItem> items) {
        super(context, resourceId, items);
        this.context = context;
    }

    /*private view holder class*/
    private class ViewHolder {
        ImageView imageView;
        TextView txtTitle;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        RowItem rowItem = getItem(position);

        LayoutInflater mInflater = (LayoutInflater) context
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_item, null);
            holder = new ViewHolder();
            holder.txtTitle = (TextView) convertView.findViewById(R.id.title);
            holder.imageView = (ImageView) convertView.findViewById(R.id.icon);
            convertView.setTag(holder);
        } else
            holder = (ViewHolder) convertView.getTag();

        holder.txtTitle.setText(rowItem.getTitle());
        holder.imageView.setImageResource(rowItem.getImageId());

        return convertView;
    }
}  

And then:

listView = (ListView) findViewById(R.id.list);
        CustomListViewAdapter adapter = new CustomListViewAdapter(this,
                R.layout.list_item, rowItems);
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(this);
    }


@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
        long id) {
    Toast toast = Toast.makeText(getApplicationContext(),
        "Item " + (position + 1) + ": " + rowItems.get(position),
        Toast.LENGTH_SHORT);
    toast.show();
}  

Refer Extending other Adapters too, for ListView(s) and their custom implementation:
Eg. http://theopentutorials.com/tutorials/android/listview/android-custom-listview-with-image-and-text-using-arrayadapter/

Answer 2

You don't necessarily need a custom ArrayAdapter, a SimpleAdapter will do the trick for a thumbnail/text combo. You can store the path to the thumbnail and the text you want in a HashMap array, and then apply it using a SimpleAdapter. For example, if you had 5 thumbnails + text and arrays of each:

List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
for (int i = 0; i < 5; i++) {
            Map<String, Object> datum = new HashMap<String, Object>(2);
            datum.put("thumbnail", thumbnail[i]);
            datum.put("name", text[i]);
            data.add(datum);
        }
YourListViewId.setAdapter(new SimpleAdapter(this, data, R.layout.yoursinglerowlayout, new String[] {"thumbnail","name"}, new int[] {R.id.imageView, R.id.titoloTv}));

Answer 3

First: You will have to change your ArrayAdapter to BaseAdapter because BaseAdapter gives you more flexibility with the views. Try to use this code and see how it works:

Here's how I am getting images from sd card and populating it in a listview

public class GetSdCardContent extends Activity {

    public static Cursor cursor;
    private int columnIndex;
    private File file;
    private String SD_CARD_ROOT;
    ArrayList<String> f = new ArrayList<String>(); 
    File[] listFile;
    ImageAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.sdcard_layout);


        getSdcardImages();


        ListView lv1 = (ListView) findViewById(R.id.sdlistView1);
        adapter = new ImageAdapter();
        lv1.setAdapter(adapter);

    }


    public void getSdcardImages() {
        File file = new File(
                android.os.Environment.getExternalStorageDirectory().getPath(),
                "Pictures");


        if (file.isDirectory()) {
            listFile = file.listFiles();

            for (int i = 0; i < listFile.length; i++) {

                f.add(listFile[i].getAbsolutePath());
                Log.i("FILES:"+"---", f.toString());

            }
        }
    }

This is the adapter I am using. It's a base adapter and I am getting only images for now. You can also add your TextView if you want to.

    public class ImageAdapter extends BaseAdapter {
        private LayoutInflater mInflater;

        public ImageAdapter() {
            mInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

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

        public Object getItem(int position) {
            return position;
        }

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

        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                holder = new ViewHolder();
                convertView = mInflater.inflate(R.layout.custom_listview_items,
                        null);
                holder.imageview = (ImageView) convertView
                        .findViewById(R.id.customimageView1);

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

            Bitmap myBitmap = BitmapFactory.decodeFile(f.get(position));
            try {

                holder.imageview.setImageBitmap(getResizedBitmap(myBitmap, 300, 300));
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return convertView;
        }
    }

This method is for bitmap. If you want to resize your image and stuff.

    public Bitmap getResizedBitmap(Bitmap bm, int newHeight, int newWidth) {
        int width = bm.getWidth();
        int height = bm.getHeight();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // CREATE A MATRIX FOR THE MANIPULATION
        Matrix matrix = new Matrix();
        // RESIZE THE BIT MAP
        matrix.postScale(scaleWidth, scaleHeight);

        // "RECREATE" THE NEW BITMAP
        Bitmap resizedBitmap = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, false);
        return resizedBitmap;
    }
    class ViewHolder {
        ImageView imageview;

    }
}

Last part: Two layouts.

One: layout for items.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/customimageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bluebutton" />

</LinearLayout>

Second: Main Layout. (ListView)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

     <ListView
        android:id="@+id/sdlistView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView> 


</LinearLayout>

Hope this gives some help..:)