Load Image in ImageView from URL stored in JSONString in Android

Question

I have a JSON string, say a name and a Url . I need to extract name into the TextView and extract and display image in ImageView. Below is the code for above scenario.

 public static final String JSON_STRING="{\"WebImages\":{\"Imagename\":\"image_name\",\"imageurl\":http://www.example.com/image/example.png}}"; 

I need to display the name in TextView which I created, and fetch the image from that url and display in the Imageview.

Answer 1

First of all use Gson to parse Json and get url as a String, then you can use UniversalImageLoader library (it does the async image download and very easy to use) https://github.com/nostra13/Android-Universal-Image-Loader

static public DisplayImageOptions options= new DisplayImageOptions.Builder().cacheOnDisk(true).cacheInMemory(true).build();
    imageLoader.displayImage(imgUrl, ivImage, options, new ImageLoadingListener() {

        public void onLoadingStarted(String imageUri, View view) {
            ((ImageView)view).setImageResource(R.drawable.nofoto);
        }

        public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
            ((ImageView)view).setImageResource(R.drawable.nofoto);
        }

        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {

        }

        public void onLoadingCancelled(String imageUri, View view) {
        }

    });

Answer 2

You can use GSON library to parse the json into a plain Java Object and then use that object to fill in the TextView and ImageView. If you don't want to use external libraries you can use JSON classes like this:

JSONObject object = new JSONObject("your strnig");
JSONObject webimages = object.getJSONObject("WebImages");
String imageName = webimages.getString("image_name")
String imageUrl = webimages.getString("imageurl")

Answer 3

Use Universal Image Loader to load image very fast and smooth

Answer 4

You could extract the image name and url like this

 public static final String JSON_STRING="{\"WebImages\":{\"Imagename\":\"image_name\",\"imageurl\":http://www.example.com/image/example.png}}"; 
JSONObject jsonObject = new JSONObject(JSON_STRING);
JSONObject webImages = jsonObject.getJSONObject("WebImages");
String imageName = webImages.getString("Imagename");
String imageUrl = webImages.getString("imageurl");

Now, you have the imageName and the imageUrl. You can easily set the text doing something like myTextView.setText(imageName). For loading the image into ImageView, I suggest using the Picasso library. It is extremely easy to use. All you need is one line of code, which would look like

Picasso.with(context).load(imageUrl).into(imageView);

Answer 5

You can do something like this.

         public static final String JSON_STRING="{"WebImages":{"Imagename":"image_name","imageurl":http://www.example.com/image/example.png}}";
    private ImageLoader _ImageLoader;

                    try {
            JSONObject _jObj = new JSONObject(JSON_STRING);
            JSONObject _jSubObj = _jObj .getJSONObject("WebImages");
        String _imageName= _jSubObj.getString("Imagename");
YOUR_TEXTVIEW.setText(_imageName);
        String _imageURL= _jSubObj.getString("imageurl");
      _ImageLoader = new ImageLoader(CURRENT_ACTIVITY.this);
       _ImageLoader.DisplayImage(_imageURL,
                        R.drawable.ic_launcher, YOUR_IMAGEVIEW);
                } catch (JSONException e) {
                                        // TODO Auto-generated catch block

                                        e.printStackTrace();
                                    }


    public class ImageLoader {

        MemoryCache memoryCache=new MemoryCache();
        FileCache fileCache;
        private Map<ImageView, String>     imageViews=Collections.synchronizedMap(new WeakHashMap<ImageView, String>());
        ExecutorService executorService; 

        public ImageLoader(Context context){
            fileCache=new FileCache(context);
            executorService=Executors.newFixedThreadPool(5);
        }

        int stub_id = R.drawable.ic_launcher;
        public void DisplayImage(String url, int loader, ImageView imageView)
        {
            try {

                stub_id = loader;
                imageViews.put(imageView, url);
                Bitmap bitmap=memoryCache.get(url);
                if(bitmap!=null)
                    imageView.setImageBitmap(bitmap);
                else
                {
                    queuePhoto(url, imageView);

                    imageView.setImageResource(loader);


                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        private void queuePhoto(String url, ImageView imageView)
        {
            PhotoToLoad p=new PhotoToLoad(url, imageView);
            executorService.submit(new PhotosLoader(p));
        }

        public Bitmap getBitmap(String url)
        {
            File f=fileCache.getFile(url);

            //from SD cache
            Bitmap b = decodeFile(f);
            if(b!=null)
                return b;

            //from web
            try {
                Bitmap bitmap=null;
                URL imageUrl = new URL(url);
                HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection();
                conn.setConnectTimeout(30000);
                conn.setReadTimeout(30000);
                conn.setInstanceFollowRedirects(true);
                InputStream is=conn.getInputStream();
                OutputStream os = new FileOutputStream(f);
                Utils.CopyStream(is, os);
                os.close();
                bitmap = decodeFile(f);
                return bitmap;
            } catch (Exception ex){
                ex.printStackTrace();
                return null;
            }

        }

        public Bitmap getFacebookImage(String userId) {
            // TODO Auto-generated method stub
            Bitmap bitmap = null;

            try {

            HttpGet httpRequest = new HttpGet(
            URI.create(userId));
            HttpClient httpclient = new DefaultHttpClient();
            HttpResponse response = (HttpResponse) httpclient
            .execute(httpRequest);
            HttpEntity entity = response.getEntity();
            BufferedHttpEntity bufHttpEntity = new BufferedHttpEntity(
            entity);
            bitmap = BitmapFactory
            .decodeStream(bufHttpEntity
            .getContent());
            httpRequest.abort();

            } catch (Exception e) {
            e.printStackTrace();
            }
            return bitmap;
            }

        //decodes image and scales it to reduce memory consumption
        private Bitmap decodeFile(File f){
            try {
                //decode image size
                BitmapFactory.Options o = new BitmapFactory.Options();
                o.inJustDecodeBounds = true;
                BitmapFactory.decodeStream(new FileInputStream(f),null,o);

                //Find the correct scale value. It should be the power of 2.
            //  final int REQUIRED_SIZE=200;
            //  int width_tmp=o.outWidth, height_tmp=o.outHeight;
            //  int scale=1;
            //  while(true){
            //      if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE)
                        //break;
                    //width_tmp/=2;
                    //height_tmp/=2;
                //  scale*=2;
            //  }

                //decode with inSampleSize
        BitmapFactory.Options o2 = new BitmapFactory.Options();
        o2.inSampleSize=1;
                return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);

            } catch (FileNotFoundException e) {

            }catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

        //Task for the queue
        private class PhotoToLoad
        {
            public String url;
            public ImageView imageView;
            public PhotoToLoad(String u, ImageView i){
                url=u;
                imageView=i;
            }
        }

        class PhotosLoader implements Runnable {
            PhotoToLoad photoToLoad;
            PhotosLoader(PhotoToLoad photoToLoad){
                this.photoToLoad=photoToLoad;
            }

            @Override
            public void run() {
                if(imageViewReused(photoToLoad))
                    return;
                Bitmap bmp=getBitmap(photoToLoad.url);
                memoryCache.put(photoToLoad.url, bmp);
                if(imageViewReused(photoToLoad))
                    return;
                BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad);
                Activity a=(Activity)photoToLoad.imageView.getContext();
                a.runOnUiThread(bd);
            }
        }

        boolean imageViewReused(PhotoToLoad photoToLoad){
            String tag=imageViews.get(photoToLoad.imageView);
            if(tag==null || !tag.equals(photoToLoad.url))
                return true;
            return false;
        }

        //Used to display bitmap in the UI thread
        class BitmapDisplayer implements Runnable
        {
            Bitmap bitmap;
            PhotoToLoad photoToLoad;
            public BitmapDisplayer(Bitmap b, PhotoToLoad p){bitmap=b;photoToLoad=p;}
            public void run()
            {
                if(imageViewReused(photoToLoad))
                    return;
                if(bitmap!=null)
                    photoToLoad.imageView.setImageBitmap(bitmap);
                else
                    photoToLoad.imageView.setImageResource(stub_id);
            }
        }

        public void clearCache() {
            memoryCache.clear();
            fileCache.clear();
        }

    }