How to lazy load images in ListView in Android?

 

Lazy loading of images in a ListView in Android is a common technique used to improve performance by loading and displaying images only when they are actually needed, rather than loading all images at once. To achieve this, you can use libraries like Picasso, Glide, or implement a custom solution. Below, I'll provide an example using the Picasso library for lazy loading images in a ListView.

1. Add Picasso to Your Project:

   In your app's build.gradle file, add Picasso as a dependency:

   gradle

implementation 'com.squareup.picasso:picasso:2.71828'

Create a Custom Adapter:

Create a custom adapter that extends BaseAdapter or ArrayAdapter. This adapter will be responsible for populating your ListView with data and loading images lazily using Picasso. Here's a simple example:

java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.squareup.picasso.Picasso;

public class CustomListAdapter extends BaseAdapter {
    private Context context;
    private String[] imageUrls;
    private String[] itemNames;

    public CustomListAdapter(Context context, String[] itemNames, String[] imageUrls) {
        this.context = context;
        this.itemNames = itemNames;
        this.imageUrls = imageUrls;
    }

    @Override
    public int getCount() {
        return itemNames.length;
    }

    @Override
    public Object getItem(int position) {
        return itemNames[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.list_item_layout, parent, false);
        }

        TextView itemNameTextView = convertView.findViewById(R.id.itemNameTextView);
        ImageView itemImageView = convertView.findViewById(R.id.itemImageView);

        itemNameTextView.setText(itemNames[position]);
        
        // Load the image using Picasso (lazy loading)
        Picasso.get().load(imageUrls[position]).into(itemImageView);

        return convertView;
    }
}

Create a Layout for List Items:

Create a layout file (e.g., list_item_layout.xml) for your list items. This layout will define the appearance of each item in the ListView. Here's a simple example:

xml

<!-- list_item_layout.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/itemImageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/itemNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:padding="8dp"/>
</LinearLayout>

Use the Custom Adapter in Your Activity:

In your activity, set up the ListView and use the custom adapter to populate it with data:

java

4. import android.app.Activity;
   import android.os.Bundle;
   import android.widget.ListView;
   
   public class MyActivity extends Activity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           String[] itemNames = {"Item 1", "Item 2", "Item 3"};
           String[] imageUrls = {"URL1", "URL2", "URL3"};
   
           ListView listView = findViewById(R.id.listView);
           CustomListAdapter adapter = new CustomListAdapter(this, itemNames, imageUrls);
           listView.setAdapter(adapter);
       }
   }
   

5. Load Images with Picasso:

   In the getView method of your custom adapter, use Picasso to load images from URLs into the ImageView widget. Picasso handles the lazy loading and caching of images for you.

6. Permissions:

   Ensure you have the necessary permissions in your AndroidManifest.xml file to access the internet if you are loading images from external URLs.

That's it! With this setup, your ListView will load and display images lazily as the user scrolls through the list, which helps improve the performance of your Android app, especially when dealing with a large number of images.