load image from url picasso

Question

so I've been able to read JSON into my listview but now I'm trying to figure out where to use picasso to read these images from URL.

Sample JSON:

"results": 
{
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "hair_color": "blond",
  "skin_color": "fair",
  "eye_color": "blue",
  "birth_year": "19BBY",
  "gender": "male",
  "image": "https://loremflickr.com/320/240?lock=1"
},
{
  "name": "C-3PO",
  "height": "167",
  "mass": "75",
  "hair_color": "n/a",
  "skin_color": "gold",
  "eye_color": "yellow",
  "birth_year": "112BBY",
  "gender": "n/a",
  "image": "https://loremflickr.com/320/240?lock=2"
},

Screenshot of listview I know I need a code similar to:

String imageUri = "https://i.imgur.com/tGbaZCY.jpg";
ImageView ivBasicImage = (ImageView) findViewById(R.id.ivBasicImage);
Picasso.with(context).load(imageUri).into(ivBasicImage);

But im not sure where to insert in my APP structure. Here is my MainActivity.java:

public class MainActivity extends AppCompatActivity implements LoadJSONTask.Listener, AdapterView.OnItemClickListener {

private ListView mListView;

public static final String URL = "http://public.duethealth.com/api/project.json";

private List<HashMap<String, String>> mAndroidMapList = new ArrayList<>();

private static final String KEY_NAME = "name";
private static final String KEY_HT = "height";
private static final String KEY_MASS = "mass";
private static final String KEY_HAIR = "hair_color";
private static final String KEY_SKIN = "skin_color";
private static final String KEY_EYE = "eye_color";
private static final String KEY_BIRTH = "birth_year";
private static final String KEY_GEN = "gender";
private static final String KEY_IMAGE = "image";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mListView = (ListView) findViewById(R.id.list_view);
    mListView.setOnItemClickListener(this);
    new LoadJSONTask(this).execute(URL);
}

@Override
public void onLoaded(List<StarWar> androidList) {

    for (StarWar android : androidList) {

        HashMap<String, String> map = new HashMap<>();

        map.put(KEY_NAME, android.getName());
        map.put(KEY_HT, android.getHeight());
        map.put(KEY_MASS, android.getMass());
        map.put(KEY_HAIR, android.getHair_color());
        map.put(KEY_SKIN, android.getSkin_color());
        map.put(KEY_EYE, android.getEye_color());
        map.put(KEY_BIRTH, android.getBirth_year());
        map.put(KEY_GEN, android.getGender());
        map.put(KEY_IMAGE,android.getImage());

        mAndroidMapList.add(map);
    }

    loadListView();
}

@Override
public void onError() {

    Toast.makeText(this, "Error !", Toast.LENGTH_SHORT).show();
}


@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

    Toast.makeText(this, mAndroidMapList.get(i).get(KEY_NAME),Toast.LENGTH_LONG).show();
}

private void loadListView() {

    ListAdapter adapter = new SimpleAdapter(MainActivity.this, mAndroidMapList, R.layout.list_item,
            new String[] { KEY_NAME, KEY_HT, KEY_MASS, KEY_HAIR,KEY_SKIN,KEY_EYE,KEY_BIRTH,KEY_GEN,KEY_IMAGE },
            new int[] { R.id.name,R.id.height, R.id.mass, R.id.hair,R.id.skin,R.id.eye,R.id.birth,R.id.gender,R.id.image});

    mListView.setAdapter(adapter);

}

}

Can my hashmap remain how it is? Or do i need a HashMap?? Since im loading this listview all at once, it seems I need to load the images in my for-loop, then once I loadListView() they should be there.

Answer 1

If you want to add a list view that loads images from URL you should create your custom adapter (example for recycler view custom adapter) that will do that work, instead of the SimpleAdapter that you are using