Android Picasso - Image doesn't load to listview

Question

For some reason, the images could not be loaded to the listview when using the Picasso library to retrieve image URL from the server However, the imageURL did pass to the PicassoClient class. There are 10 images and the size of each image is about 20kB.

FYI, I have referred to many examples but the problem could not be solved. Please give some advice on what can be done to fix these problems.

searchActivity.java

public class searchActivity extends AppCompatActivity{
final static String urlAddress = "http://10.0.2.2/Herb/herblist.php"; 
ListView lv = (ListView) findViewById(R.id.HerbListView);

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_search);
    Downloader dl = new Downloader(searchActivity.this, urlAddress, lv);
    dl.execute();
    lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            startActivity(new Intent(searchActivity.this, searchDetail.class));
        }
    });
}

}

DataParser.java

public class DataParser extends AsyncTask<Void,Void,Integer> {
Context c;
String jsonData;
ListView lv;
ProgressDialog pd;
ArrayList<Herb> herb=new ArrayList<>();
public DataParser(Context c, String jsonData, ListView lv) {
    this.c = c;
    this.jsonData = jsonData;
    this.lv = lv;
}

@Override
protected void onPostExecute(Integer result) {
    super.onPostExecute(result);
    pd.dismiss();
    ...
    CustomAdapter adapter=new CustomAdapter(c,herb);
    lv.setAdapter(adapter);     
}
private int parseData()
{
    try
    {
        JSONArray ja=new JSONArray(jsonData);
        JSONObject jo=null;
        herb.clear();
        Herb Herb;
        for(int i=0;i<ja.length();i++)
        {
            jo=ja.getJSONObject(i);
            int id=jo.getInt("h_id");
            String name=jo.getString("h_name");
            String imageUrl=jo.getString("h_image");
            Herb=new Herb();
            Herb.setId(id);
            Herb.setName(name);
            Herb.setImageUrl(imageUrl);
            herb.add(Herb);
        }
        return 1;
    } catch (JSONException e) {
        e.printStackTrace();
    }
    return 0;
}

}

CustomAdapter.java

public class CustomAdapter extends BaseAdapter {
Context c;
ArrayList<Herb> herbs;
LayoutInflater inflater;
public CustomAdapter(Context c, ArrayList<Herb> herbs) {
    this.c = c;
    this.herbs = herbs;
    inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if(convertView==null)
    {
        convertView=inflater.inflate(R.layout.model,parent,false);
    }
    TextView nametxt= (TextView) convertView.findViewById(R.id.herbtitle);
    ImageView img= (ImageView) convertView.findViewById(R.id.thumbnail);

    Herb herb = herbs.get(position);
    nametxt.setText(herb.getName());

    PicassoClient.downloadImage(c,herb.getImageUrl(),img);
    return convertView;
}

}

PicassoClient.java

public class PicassoClient {
public static void downloadImage(Context c, String imageUrl, ImageView img){
    if (imageUrl.length() > 0 && imageUrl != null) {
        Picasso.with(c).load(imageUrl).into(img);
        //Picasso.with(c).setLoggingEnabled(true);
    } else {
        Picasso.with(c).load(R.drawable.ic_menu_gallery).into(img);
    }
}

}

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.User.herb_recognition_test.searchActivity"
    tools:showIn="@layout/activity_search">
    <ListView
        android:id="@+id/HerbListView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

model.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_margin="10dp"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="5dp"
android:layout_height="150dp">
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/thumbnail"
        android:padding="10dp"
        android:scaleType="fitXY"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Name"
        android:id="@+id/herbtitle"
        android:padding="10dp"
        android:textColor="@color/colorAccent"
        android:layout_alignParentLeft="true"
        />
</LinearLayout>
</android.support.v7.widget.CardView>

Error logcat generated when creating listview

D/EGL_emulation: eglMakeCurrent: 0x9cad3880: ver 3 1 (tinfo 0x9ca5e890)
D/EGL_emulation: eglMakeCurrent: 0x9cad3880: ver 3 1 (tinfo 0x9ca5e890)
D/EGL_emulation: eglMakeCurrent: 0x9cad3880: ver 3 1 (tinfo 0x9ca5e890)
.searchActivity: +741ms
W/SurfaceFlinger: couldn't log to binary event log: overflow.
W/Settings: Setting airplane_mode_on has moved from android.provider.Settings.System to android.provider.Settings.Global, returning read-only value.
D/skia: ---- fAsset->read(8192) returned 0
D/skia: --- SkAndroidCodec::NewFromStream returned null

Answer 1

Try to use it first typing in one line without calls to another procedure. Then check if it works.

At first sight looks it should work but you have many conditions and perhaps one of then it is wrong, so it doesn't allow use Picasso.

Try this line. Picasso.with(YOUR_CONTEXT).load(YOUR_URL).fit().into(YOUR_IMAGEVIEW);

BTW, you missed fit() function.

Answer 2

It seems that this problem arise due to the IP address of server that storse the images. I should have placed the IP address in numeric (such as 192.168.xx) instead of localhost.