Load images from JSON URl to ImageView in a listview

Question

I am trying to fetch a JSON which returns URL and then I want to load that URL image to my ImageView in a ListView by ArrayList. I want to lazy load the images via AsyncTask so that it does not effect my ListView if it does not get loaded,and also, is the Image is not available, I want to set an Image from drawable. Here is the JSON Data. In this, there is an object called posters inside which there is an Object called orignal. I want this original poster to be loaded in the image view named poster in this layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >

    <!-- ListRow Left side Thumbnail image -->

    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:padding="3dip" >

        <ImageView
            android:id="@+id/list_image"
            android:layout_width="60dip"
            android:layout_height="60dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/poster" />
    </LinearLayout>
    <!-- Rightend Arrow -->

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/arrow" />
    <!-- City -->

    <TextView
        android:id="@+id/namelisttext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/list_image"
        android:layout_marginLeft="75dip"
        android:gravity="top"
        android:paddingBottom="10dip"
        android:text="Movie Name"
        android:textColor="#040404"
        android:textSize="25sp"
        android:textStyle="bold"
        android:typeface="sans" />
    <!-- Weather Information -->

    <ImageView
        android:id="@+id/rtscore"
        android:layout_width="18dip"
        android:layout_height="18dip"
        android:layout_alignLeft="@id/namelisttext"
        android:layout_below="@id/namelisttext"
        android:contentDescription="@string/app_name"
        android:src="@drawable/rtscore" />

    <TextView
        android:id="@+id/rtscoretext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_toRightOf="@+id/rtscore"
        android:layout_alignTop="@id/rtscore"
        android:text="Score"
        android:textColor="#343434"
        android:textSize="15sp" />

    <ImageView
        android:id="@+id/audscore"
        android:layout_width="18dip"
        android:layout_height="18dip"
        android:layout_below="@id/namelisttext"
        android:layout_toRightOf="@id/rtscoretext"
        android:layout_marginLeft="7dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/audscore" />

    <TextView
        android:id="@+id/audscoretext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_toRightOf="@+id/audscore"
        android:layout_alignTop="@id/audscore"
        android:text="Score"
        android:textColor="#343434"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/castlisttext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/namelisttext"
        android:layout_below="@id/rtscore"
        android:layout_toLeftOf="@+id/releaseyearlisttext"
        android:paddingRight="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Casts"
        android:textColor="#343434"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/releaseyearlisttext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/rtscore"
        android:layout_marginRight="7dp"
        android:paddingTop="5dip"
        android:text="Year"
        android:textColor="#343434"
        android:textSize="15sp" />

</RelativeLayout>

please help me how to inser this URL in ArrayList and then lazy load the images in ListView.

Answer 1

One way to really simplify what you're looking for is to use the networking library "volley", provided by Google itself. Take a look at the following video, where they discuss several features of the library. https://developers.google.com/events/io/sessions/325304728

The library handles a lot of boilerplate code for you and does all its work asynchronously. You should just be able to fetch the json data, get the original posters url and then set that url as the source of the image. Volley will then automatically and asynchronously load that image.

Answer 2

You should use the concept of lazy loading in android.

First of all you need to parse your JSON response and get your original keys url and set into the arraylist.

Check out the Lazyloading of images in ListView which will loads the image from the url and show into the list.

Parse your JSON response as below:

JSONObject jObj=new JSONObject("<response>");
JSONArray jArray=jObj.getJSONArray("movies");
 ArrayList<String> urlList=new ArrayList<String>();

for(int i=0;i<jArray.lenght();i++)
{
      JSONObject jo_inside = ja.getJSONObject(i);

       String originalUrl=jo_inside.getJSONObject("posters").get("original").toString();
        urlList.add(originalUrl);
}