How to fetch the image from server and show into the listview android?

Question

I'm beginner in android,and i want to write the simple application to read image and data from server and show into the listview,my listview xml file is:

<?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="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/abc_btn_check_material" />

    <TextView
        android:id="@+id/textView1"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:text="TextView" />

</LinearLayout>

and read json data from server with this method:

....READ WITH ASYNCTASK
try {
                JSONArray jsonArray=new JSONArray(result);
                prgmNameList=new String[jsonArray.length()];
                prgmImages=new int[jsonArray.length()];

                for(int i=0;i<jsonArray.length();i++)
                {
                    JSONObject JsonObj=jsonArray.getJSONObject(i);
                    String TITLES=JsonObj.getString("title");
                    String imgURL=JsonObj.getString("img");
                    Log.d("BEHZAD TITLES=",TITLES);
                    .....I want read the image and show into the listview with title
}

How can i solve that plan?thanks.

Answer 1

You have to make your own custom adapter for example with this tutorial http://www.androidhive.info/2014/07/android-custom-listview-with-image-and-text-using-volley/

What's more, for download and cache Image I recommend you https://github.com/nostra13/Android-Universal-Image-Loader

Here is an example http://sunil-android.blogspot.com/2013/09/lazy-loading-image-download-from.html

Have fun! ;)

Answer 2

Hi you can create a BitmapDownloaderTask class to download your image.

public class BitmapDownloaderTask extends AsyncTask<String, Void, Bitmap> {


    private String url;
    private String path, imgName;
    private final WeakReference<ImageView> imageViewReference;


    public BitmapDownloaderTask(ImageView imageView, String path, String imgName) {

        imageViewReference = new WeakReference<ImageView>(imageView);

        this.path = path;
        this.imgName = imgName;

    }//BitmapDownloaderTask


    @Override
    // Actual download method, run in the task thread
    protected Bitmap doInBackground(String... params) {
        // params comes from the execute() call: params[0] is the url.
        return getBitmapFromURL(params[0]);

    }//doInBackground


    @Override
    // Once the image is downloaded, associates it to the imageView
    protected void onPostExecute(Bitmap bitmap) {

        if (isCancelled()) {
            bitmap = null;
        }

        if (imageViewReference != null && bitmap != null) {
            ImageView imageView = imageViewReference.get();
            if (imageView != null) {
                imageView.setImageBitmap(bitmap);

                //this is my custom method to save bitmap in the local storage
                Utility.saveBitmapToLocalStorage(bitmap, this.path, this.imgName);
            }
        }

    }//onPostExecute


    public static Bitmap getBitmapFromURL(String link) {
        /* this method downloads an Image from the given URL,
        *  then decodes and returns a Bitmap object
        */
        try {
            URL url = new URL(link);
            HttpURLConnection connection = (HttpURLConnection)url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);

            return myBitmap;

        } catch (IOException e) {
            e.printStackTrace();
            Log.e("getBmpFromUrl error: ", e.getMessage().toString());
            return null;
        }

    }//getBitmapFromURL


}//class

than you can create your ListView normally like this (use a custom Adapter)

String[] strings = new String[]{"item 1","item 2","item 3"};

ListView mList = (ListView)rootView.findViewById(R.id.mListId);

MAdapter adapter = new MAdapter(this, R.layout.adapter_listview_mAdapter, strings);
mList.setAdapter(adapter);

finally in MAdapter class you can use your BitmapDownloaderTask to download your image

public class MAdapter extends ArrayAdapter<YourModel> {


    public MAdapter(Context context, int resource, List<YourModel> items) {

        super(context, resource, items);

    }//MAdapter


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

        LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.adapter_listview_mAdapter, null);


        ImageView image = (ImageView)convertView.findViewById(R.id.imageId);

        YourModel model = getItem(position);

        BitmapDownloaderTask task = new BitmapDownloaderTask(image, "path", "folder_" + model.identifier);
            task.execute(url);
        }

        return convertView;

    }//getView


}//class

Answer 3

It's simple just create an URLConnection and do resizing for your listview. All Code can be found here: Best method to download image from url in Android. hope i could helped you out ;)

Answer 4

How to create custom adapter and display images was described here:

Using Picasso library with ListView

Instead of Picasso you may check another great library Glide

Both of them are much easier to use that Universal Image Loader