Display Image in Listview with AsyncTask

Question

I am trying to display images in a listview with AsyncTask but I am getting an error. Saying...

Attempt to invoke virtual method 'java.lang.String java.lang.Object.toString()' on a null object reference

This is error is happening on

public LoadImage(ImageView imv) {
        this.imv = imv;
        this.path = imv.getTag().toString();
}

And

    LoadImage loadImage = new LoadImage(imageView);
    Bitmap bitmap = loadImage.doInBackground();

Here is LoadImage.java

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.AsyncTask;
import android.os.Environment;
import android.view.View;
import android.widget.ImageView;

import java.io.File;

/**
 * Created by Yudii on 27/05/2016.
 */
class LoadImage extends AsyncTask<Object, Void, Bitmap>{

    private ImageView imv;
    private String path;

    public LoadImage(ImageView imv) {
        this.imv = imv;
        this.path = imv.getTag().toString();
    }

    @Override
    protected Bitmap doInBackground(Object... params) {

        Bitmap bitmap = null;
        File file = new File(Environment.getExternalStorageDirectory()
                .getAbsolutePath() + path);

        if (file.exists()) {
            bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
        }

        return bitmap;
    }
    @Override
    protected void onPostExecute(Bitmap result) {


        if (!imv.getTag().toString().equals(path)) {
               /* The path is not same. This means that this
                  image view is handled by some other async task.
                  We don't do anything and return. */
          //  return;
        }




        if(result != null && imv != null){
            imv.setVisibility(View.VISIBLE);
            imv.setImageBitmap(result);
        }else{
            imv.setVisibility(View.GONE);
        }
    }

}

And here is CustomList.java

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class CustomList extends ArrayAdapter<String>{

    private final Activity context;
    private final Integer[] imageId;

    public CustomList(Activity context,
                      String[] web, Integer[] imageId) {
        super(context, R.layout.list_single, web);
        this.context = context;
        this.imageId = imageId;

    }
    @Override
    public View getView(int position, View view, ViewGroup parent) {

        LayoutInflater inflater = context.getLayoutInflater();
        View rowView= inflater.inflate(R.layout.list_single, null, true);

        ImageView imageView = (ImageView) rowView.findViewById(R.id.img);


        LoadImage loadImage = new LoadImage(imageView);
        Bitmap bitmap = loadImage.doInBackground();


        imageView.setImageResource(imageId[position]);

        return rowView;

    }
}

And here is MainActivity.java

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {

    ListView list;
    String[] web = {
            "Google Plus",
            "Twitter",
            "Tall",
    };

    Integer[] imageId = {
            R.drawable.gggggggggg,
            R.drawable.hhhhhhhhhh,
            R.drawable.ttttttttttt
    };

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



        CustomList adapter = new
                CustomList(MainActivity.this, web, imageId);


        list=(ListView)findViewById(R.id.list);
        list.setAdapter(adapter);
        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();

            }
        });

    }
}

Answer 1

1,Reason:

As I see, in your getView function:

ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
// You need to set tag to your image view
// Ex: imageView.setTag("your_image_file_path") below this line

your imageView has no tag so the below code will get NullPointerException.

public LoadImage(ImageView imv) {
    this.imv = imv;
    this.path = imv.getTag().toString(); // Crashed here.
}

Also, I see in your getView function has this code:

imageView.setImageResource(imageId[position]);

That means "your ImageView will set resource corresponding to defined imageId array". So you no need AsyncTask class, let remove it and change your getView like below:

@Override
    public View getView(int position, View view, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View rowView= inflater.inflate(R.layout.list_single, parent, false);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
        // Remove below code
        // LoadImage loadImage = new LoadImage(imageView);
        // Bitmap bitmap = loadImage.doInBackground();
        imageView.setImageResource(imageId[position]);
        return rowView;
    }

Your Asynctask class is needed whenever you use path of image file, not drawable resources.

2, Improvement:

You can learn more about ViewHolder pattern when using ListView, RecyclerView to improve performance, from Google Search. Below is an example with your current code:

@Override
        public View getView(int position, View view, ViewGroup parent) {
            View holder = null;
            if (view == null) {
                holder = new ViewHolder();
                LayoutInflater inflater = context.getLayoutInflater();
                view = inflater.inflate(R.layout.list_single, parent, false);
                holder.imageView = (ImageView) view.findViewById(R.id.img);
                view.setTag(holder);
            } else {
                holder = (ViewHolder) view.getTag();
            }

            holder.imageView.setImageResource(imageId[position]);
            return view;
        }
      static class ViewHolder { // should be static class
           ImageView imageView;
      }

Answer 2

Add this in your dependencies :-

  compile 'com.squareup.picasso:picasso:2.5.2'

and then load your image :-

   Picasso.with(this)
                .load(drawerImage) // ImagePath
                .placeholder( R.mipmap.download)
                .error( R.mipmap.add_photo)
                .into(imageDrawerView); //ImageView 

Answer 3

Why do you need AsyncTask? Try to use library Picasso and open images by one string:

File file = new File(Environment.getExternalStorageDirectory()
            .getAbsolutePath() + path);
Picasso.with(context).load(file).into(imageView);

Bitmap objects are very weight and you need to clean memory after each Bitmap image for prevent OutOfMemoryError. I recommend you to use libraries.

Answer 4

You need to change loadImage.execute(); instead of Bitmap bitmap = loadImage.doInBackground();