Insert image in Listview via JSON + SQL

Question

I created a code that perfectly brings the results via JSON from my database and fills my Listview with Strings, but I would like the database to bring the "image" column I created, the address relative to the image (Ex: http://localhost/Dashboard/Android/Image/car.jpeg) and Listview carried this image inside it through the address recorded in the database, the addresses of the images are recorded in the "image" column in my database, I have tried several ways, but I could not, I will post the code that fills my Listview only with strings, because this code is working properly:

private void showEmployee(){

Jsonobject jsonObject = null;

Arraylist> list = new Arraylist>();

Try { jsonObject = new Jsonobject(JSON_STRING); Jsonarray result = jsonObject.getJSONArray(Config.TAG_JSON_ARRAY);

for(int i = 0; i<result.length(); i++){ JSONObject jo = result.getJSONObject(i); String id = jo.getString(Config.TAG_ID); String name = jo.getString(Config.TAG_NAME); String salary = jo.getString(Config.TAG_SAL); String image = jo.getString(Config.TAG_IMAGE); HashMap<String, String> employees = new HashMap<>(); employees.put(Config.TAG_ID,id); employees.put(Config.TAG_NAME,name); employees.put(Config.TAG_SAL,salary); employees.put(Config.TAG_IMAGE,image); list.add(employees); } } catch (JSONException e) { e.printStackTrace(); } //ListAdapter SimpleAdapter adapter = new SimpleAdapter( ViewAllEmployee.this, list, R.layout.list_item, new String[]{Config.TAG_ID,Config.TAG_NAME, Config.TAG_SAL, Config.TAG_IMAGE}, new int[]{R.id.id, R.id.name, R.id.salary, R.id.image} ); listView.setAdapter(adapter); }

Answer 1

Well, as it was not specified I would recommend that you do this using some of the existing tools (Glide is even maintained by Google)

To use Glide you need to add its dependency.

In your buid.Radle file APP (There is one at the root of the project, add to the APP). Locate the part of dependencies and add that line:

dependencies {
  compile 'com.github.bumptech.glide:glide:3.7.0'
  compile 'com.android.support:support-v4:19.1.0' // <---- Não precisa, mas é recomendado utilizar uma RecyclerView ao invés da ListView
}

Inside your adapter, in the method getView you do something like :

  @Override 
  public View getView(int position, View recycled, ViewGroup container) {
  final ImageView minhaImageView;
  if (recycled == null) {
    minhaImageView= (ImageView) inflater.inflate(R.layout.minha_image_view, container, false);
  } else {
    minhaImageView= (ImageView) recycled;
  }

  String url = minhaListaDeUrls.get(position);

  Glide
    .with(meuContexto)  // <------ É necessário passar um contexto para ele, pode ser seu Fragment ou um Context
    .load(url)   // <--- Sua Url
    .centerCrop()  // <---- Estético, é o método como a imagem será posicionada na view
    .placeholder(R.drawable.loading_spinner)  // <---- Você pode especificar um Drawable para aparecer enquanto carrega
    .crossFade()    // <----- Animaçãozinha :)
    .into(minhaImageView);   // <----- Onde a imagem será carregada.

  return minhaImageView;
}

Note that I have implemented a list only with Imageview for understanding only, the important thing is the part Glide.... the rest is just for you to define in which Imageview you will load the image, adapt to your need