How to implement Asynctask to load images in ArrayAdapter

Issue

I'm working on a course list app which loads each course title together with the course image in a listview through ArrayAdapter, I want to implement asynctask for loading of images in between listview and ArrayAdapter because the listview is lagging while scrolling, Please Help me.

MainActivity.java

package com.emmakade.okt;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

public class MainActivity extends AppCompatActivity {


    protected List<Course> data;

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

        data = DataProvider.getData();

        ArrayAdapter<Course> courseArrayAdapter =
                new CourseArrayAdapter(this, 0, data);
        ListView listView = (ListView) findViewById(android.R.id.list);
        listView.setAdapter(courseArrayAdapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Course course = data.get(position);
                displayDetail(course);
            }
        });

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == DETAIL_REQUEST_CODE) {
            if (resultCode == RESULT_OK) {
                String msg = data.getStringExtra("resultMessage");
                Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
            }
        }
    }

    class CourseArrayAdapter extends ArrayAdapter<Course>{

        Context context;
        List<Course> objects;

        public CourseArrayAdapter(Context context, int resource, List<Course> objects) {
            super(context, resource, objects);

            this.context = context;
            this.objects = objects;
        }

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

            Course course = objects.get(position);

            LayoutInflater inflater =
                    (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

            View view = inflater.inflate(R.layout.course_item, null);

            TextView tv = (TextView) view.findViewById(R.id.tvTitle);
            tv.setText(course.getTitle());

            ImageView iv = (ImageView) view.findViewById(R.id.imageCourse);
            int res = context.getResources().getIdentifier(
                    "image_" + course.getCourseNumber(), "drawable",
                    context.getPackageName()
            );
            iv.setImageResource(res);

            return view;
        }
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/imageLogo"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/academy"/>
    <TextView
        android:id="@+id/txtOutput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/course_catalog"
        android:layout_alignBottom="@+id/imageLogo"
        android:layout_toEndOf="@+id/imageLogo"
        android:layout_marginStart="20dp"
        android:layout_marginBottom="15dp"
        android:textSize="28sp" />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@android:id/list"
        android:layout_below="@+id/imageLogo"
        android:layout_marginTop="10dp"
        android:layout_alignParentStart="true" />

</RelativeLayout>

course_item.xml

<?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="match_parent"
    android:padding="10dp">

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:id="@+id/imageCourse" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvTitle"
        android:layout_toEndOf="@+id/imageCourse"
        android:layout_marginStart="10dp"
        android:textSize="18sp"/>
</RelativeLayout>

enter image description here

Solution

I recommend you to use Glide library for asynchronous image loading, caching and displaying.

Add Dependency

implementation 'com.github.bumptech.glide:glide:4.5.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.5.0'

Use like this in adapter

Glide.with(this).load("url").into(imageView);

ImageView iv = (ImageView) view.findViewById(R.id.imageCourse);
        int res = context.getResources().getIdentifier(
                "image_" + course.getCourseNumber(), "drawable",
                context.getPackageName()
        );
 Glide.with(this).load(res).into(iv);

Answered By - Ramesh sambu