Imageview and listviews - is custom adapter the solution?

Question

I just started some basic Android programming, but I'm kinda stuck. As simple as is, I want to make a listview containing images (final product is a sorted gallery, fullscreen, no text). I try to load the images asynchronized from an URL, and afterwards load them into my listview. What really happens is, that my listview gets filled up with text (android.widget.id blabla). It seems to be the id of my imageviews, and therefore I think the problem is the adapter. Would creating a custom adapter for images solve the problem, and how would that adapter look like? I've tried searching out for some examples (since a lot of people have tried something similar), but I can't find something that fits in.

MainActitivy.java:

public class MainActivity extends Activity {    
private ArrayList<ImageView> titles;
private ArrayAdapter<ImageView> adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);     
    setContentView(R.layout.activity_main);

    titles = new ArrayList<ImageView>();


    final ListView listview = (ListView) findViewById(R.id.list);
    adapter = new ArrayAdapter<ImageView>(this, android.R.layout.simple_list_item_1, android.R.id.text1, titles);

    listview.setAdapter(adapter); 

    titles.add(new ImageView(this));

    loadItems("http://test.com/images/3da25cead4806472c8c27012f724be45d0022cc7.jpeg");
    loadItems("http://test.com/images/fbef951ceb9a83d86427d607d67f1ba93008bdfa.jpeg");
    loadItems("http://test.com/images/e982478695ab765bb746dce4da8328a60fbd0bf6.jpeg");
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

public void loadItems(String url){
    new LoadImage((ImageView) new ImageView(this), this).execute(url);
    //adapter.notifyDataSetChanged();
}

public void addToList(ImageView image){
    titles.add(image);
    adapter.notifyDataSetChanged();
}

}

LoadImage.java:

class LoadImage extends AsyncTask<String, Void, Bitmap> {
private ImageView image;
private MainActivity mainActivity;

  public LoadImage(ImageView image, MainActivity mainActivity) {
      this.image = image;
      this.mainActivity = mainActivity;
  }

  protected Bitmap doInBackground(String... urls) {
      String urldisplay = urls[0];
      Bitmap image = null;
      try{
        InputStream in = new java.net.URL(urldisplay).openStream();
        image = BitmapFactory.decodeStream(in);
      }catch(Exception e){
          Log.e("Error: ", e.getMessage());
      }
      return image;
  }

protected void onPostExecute(Bitmap result) {
      image.setImageBitmap(result);
      mainActivity.addToList(image);
  }
}

EDIT: So, I tried using Universal Image Loader as suggested, I also tried creating my own adapter. Here is what it looks like now:

MainActivity.java:

public class MainActivity extends Activity {    
private ImageLoader imageLoader;
private List<ImageObject> images;
private CustomAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);     
    setContentView(R.layout.activity_main);

    images = new ArrayList<ImageObject>();


    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(this.getBaseContext()).build();
    imageLoader = ImageLoader.getInstance();
    imageLoader.init(config);


    adapter = new CustomAdapter(this, R.layout.list_view_row_item, images);
    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);

    addImage("https://www.google.dk/images/srpr/logo11w.png");
    addImage("https://www.google.dk/images/srpr/logo11w.png");
    addImage("https://www.google.dk/images/srpr/logo11w.png");
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}
public void addImage(String url){
    ImageObject image = new ImageObject(url, imageLoader);
    images.add(image);
    adapter.notifyDataSetChanged(); //Is this legit??
}
}

CustomAdapter.java:

public class CustomAdapter extends ArrayAdapter<ImageObject>{
private List<ImageObject> images;
private Context context;
private int resourceID;

public CustomAdapter(Context context, int resourceID, List<ImageObject> images) {
    super(context, resourceID, images);

    this.context = context;
    this.images = images;
    this.resourceID = resourceID;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View view = convertView;

    if(view == null){
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(resourceID, null);
    }

    ImageObject image = images.get(position);

    if(image != null){
        // What goes here?
    }

    return view;
}

}

ImageObject.java:

public class ImageObject {
private String url;
private ImageView image;

public ImageObject(String url, ImageLoader imageLoader){
    this.setUrl(url);
    imageLoader.displayImage(url, image);
}

public String getUrl() {
    return url;
}

public void setUrl(String url) {
    this.url = url;
}

public ImageView getImage() {
    return image;
}

public void setImage(ImageView image) {
    this.image = image;
}
}

How do I put my loaded image into the list-element? (//What goes here?)

EDIT AGAIN: Solved it by changing the universal loader code into the adapter. ImageView imageV = (ImageView) view.findViewById(R.id.imageview); imageLoader.displayImage(image.getUrl(), imageV);

Answer 1

simple listView will use a String as it's list, if you want anything else or more then you have to use custom adapter.Here are some examples for you

androidexample.com, vogella.com, javacodegeeks.com, learn2crack.com

Answer 2

you should use this library to load images from network into your list view . it will cache them for you . this is very efficient . give it a try . Android-Universal-Image-Loader

and you dont have to do so much to load images into listview. it just a line of code. for any question you can ask me.

Answer 3

Yes you have to you a custom arrayAdapter, Its not a big deal and easy to implement. You can find a lot of examples online. The problem in your code is simple_list_item_1 ... This argument is for the layout to be used in the adapter. Since you have mentioned simple_list_item_1, which is a TextView in android code you will see Text only. See below what simple_list_item_1 code looks in android code base : -

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
/>