need to show images from a URL on a list view populated by JSON

Question

I need to show images from a URL on a list view populated by JSON.

This is the main piece of code used to inflate the layout for each JSON object. It is working fine for text and integer values, but I am not able to show any of the images. Each object has an image defined by its file name, stored as text on a string field, and all of them have a common URL path:

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

        if(v == null) {
            LayoutInflater li = LayoutInflater.from(getContext());
            v = li.inflate(R.layout.ofertas_app_custom_list, null);           
        }

        Ofertas_Application app = items.get(position);

        if(app != null) {

            TextView titleText = (TextView)v.findViewById(R.id.textView1);
            TextView direccionText = (TextView)v.findViewById(R.id.textView2);
            TextView valoracionText = (TextView)v.findViewById(R.id.textView3);

            if(titleText != null) titleText.setText(app.getNombreEmpresa());//populate textView1

            if (direccionText !=null) direccionText.setText(app.getDireccionEmpresa());//populate textView2
            if (valoracionText !=null) valoracionText.setText(String.valueOf(app.getValoracionEmpresa()));


            ImageView img = (ImageView)v.findViewById(R.id.imageView1);
            try {

                URL url = new URL("http://0.tqn.com/d/webclipart/1/0/5/l/4/floral-icon-5.jpg");

                HttpGet httpRequest = null;

                httpRequest = new HttpGet(url.toURI());

                HttpClient httpclient = new DefaultHttpClient();
                HttpResponse response = (HttpResponse) httpclient
                        .execute(httpRequest);

                HttpEntity entity = response.getEntity();
                BufferedHttpEntity b_entity = new BufferedHttpEntity(entity);
                InputStream input = b_entity.getContent();

                Bitmap bitmap = BitmapFactory.decodeStream(input);

                img.setImageBitmap(bitmap);

            } catch (Exception ex) {

            }  

        }

        return v;
    }

Prior to use the parsed objects image names, I am checking the app using a URL, but the list rows always show the default image declared at the layout file, in this case a facebook icon.

I need your help to implement the right way to show the image of the object at every object row. Thank you

EDITED QUESTION:

This is a screenshot from the listview after implementing the answer by Libin:

The default picture is the facebook icon.

LIST ITEM LAYOUT

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#5981b2"
android:orientation="vertical" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="2dp"
    android:src="@drawable/facebook" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerHorizontal="true"
    android:text="30"
    android:drawablePadding="10dp"
    android:gravity="center"
    android:drawableTop="@drawable/valoracion"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_toLeftOf="@+id/textView3"
    android:lines="2"
    android:text="Large Text"
    android:textColor="#ffffff"
    android:textAppearance="?android:attr/textAppearanceLarge"
     android:layout_toRightOf="@id/imageView1"
    />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView1"
    android:layout_toLeftOf="@+id/textView3"

    android:layout_below="@+id/textView1"
    android:lines="2"
    android:text="Small Text esta eb kac  case deded eadad"
    android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Answer 1

The problem is your trying to access the network URL from main thread. You need to do the network request on the background thread.

Use AsyncTask like this

 new AsyncTask<URL, Integer, Long>(){
            @Override
            protected Long doInBackground(URL... params) {
                try{

                    URL url = new URL("http://0.tqn.com/d/webclipart/1/0/5/l/4/floral-icon-5.jpg");
                    - - - - - - - -
                    // add your code to fetch the image
                    - - - - - - -
                    img.setImageBitmap(bitmap);
                }
                catch (Exception e){
                    System.out.print(e.getMessage());
                }
                return null;
            }
        }.execute();

EDIT

Here is the complete code, on how to make this working on your adapter

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

    if(v == null) {
        LayoutInflater li = LayoutInflater.from(getContext());
        v = li.inflate(R.layout.ofertas_app_custom_list, null);
    }

    Ofertas_Application app = items.get(position);

    if(app != null) {

        TextView titleText = (TextView)v.findViewById(R.id.textView1);
        TextView direccionText = (TextView)v.findViewById(R.id.textView2);
        TextView valoracionText = (TextView)v.findViewById(R.id.textView3);

        if(titleText != null) titleText.setText(app.getNombreEmpresa());//populate textView1

        if (direccionText !=null) direccionText.setText(app.getDireccionEmpresa());//populate textView2
        if (valoracionText !=null) valoracionText.setText(String.valueOf(app.getValoracionEmpresa()));

        final ImageView img = (ImageView)v.findViewById(R.id.imageView1);

        new AsyncTask<URL, Integer, Long>(){
            @Override
            protected Long doInBackground(URL... params) {
                try {

                    URL url = new URL("http://0.tqn.com/d/webclipart/1/0/5/l/4/floral-icon-5.jpg");

                    HttpGet httpRequest = null;

                    httpRequest = new HttpGet(url.toURI());

                    HttpClient httpclient = new DefaultHttpClient();
                    HttpResponse response = (HttpResponse) httpclient
                            .execute(httpRequest);

                    HttpEntity entity = response.getEntity();
                    BufferedHttpEntity b_entity = new BufferedHttpEntity(entity);
                    InputStream input = b_entity.getContent();

                    Bitmap bitmap = BitmapFactory.decodeStream(input);

                    img.setImageBitmap(bitmap);

                } catch (Exception ex) {

                }

                return null;
            }
        }.execute();
    }
    return v;
} 

Answer 2

You can't load the image from the web on the main thread. Place that code in a separate thread. I would recommend usung the universal image loader library https://github.com/nostra13/Android-Universal-Image-Loader