How to make Faster loading image from url in Gridview android xamarin?

Question

I make a gridview which load images from url. Its working good but it is very slow.I think its make user irritated.

In my code i am using Bitmap in GridView adapter . Here is my code

using System;
using Android.Widget;
using Android.App;
using System.Collections.Generic;
using Android.Views;
using Android.Graphics;
using System.Net;

namespace AMUSEAndroid
{
public class GridViewAdapter : BaseAdapter<ImageItem> 
{
    Activity context;
    List<ImageItem> items;

    public GridViewAdapter (Activity context, List<ImageItem> gridViewtems)
    {
        this.context = context;
        this.items = gridViewtems;
    }

    public override int Count {
        get { return items.Count; }
    }

    public override ImageItem this[int position]
    {
        get { return items[position]; }
    }

    public override long GetItemId (int position)
    {
        return position;
    }

    public override View GetView (int position, View convertView, ViewGroup parent)
    {
        View view = convertView;
        var item = items[position];
        if (view == null)
            view = context.LayoutInflater.Inflate(Resource.Layout.player_grid_item, null);
        ImageView imgIcon =  view.FindViewById<ImageView> (Resource.Id.img_play_bg);//.SetImageBitmap (gridViewtems[position]);
        view.FindViewById<TextView> (Resource.Id.music_text).Text = item.Heading;


        var imageBitmap = GetImageBitmapFromUrl(item.ImageResourceId);
        imgIcon.SetImageBitmap(imageBitmap);

        return view;

    }

    public Bitmap GetImageBitmapFromUrl(string url)
    {
        Bitmap imageBitmap = null;

        using (var webClient = new WebClient())
        {
            var imageBytes = webClient.DownloadData(url);
            if (imageBytes != null && imageBytes.Length > 0)
            {
                imageBitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
            }
        }

        return imageBitmap;
    }
}

}

Here ImageItem is a Model class.

Is there any other way to load image from url in Gridview. Which load images very quickly and make application faster.

Thanks in advance.

score 1 · Answer 1 · edited May 23 '17 at 10:27

1

Yup, there is.

You need asynchronous image loading. The current state-of-the-art in this task is implmented by Square's Picasso.

I have never coded in Xamarin, but a quick search shows me there is a module for Xamarin Picasso.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 01 '15 at 07:24

Boris Strandjev

46,145
15
108
135

Thanks you . I solve this issue using Picasso Components. – Bikash Dec 01 '15 at 07:46
@Bikash: superb, do not forget to accept and/or upvote if i helped you ;) – Boris Strandjev Dec 01 '15 at 07:48
Can absolutely confirm that Picasso is the holy grail currently for image loading. It saved my app – Ashetynw Nov 09 '20 at 16:13
@Ashetynw well the post is kind of oldish. Probably more people will go with Glide: https://github.com/bumptech/glide nowadays – Boris Strandjev Nov 09 '20 at 18:19

score 0 · Answer 2 · answered Dec 02 '15 at 10:31

I use this:

private async Task<Bitmap> GetImageBitmapFromUrl(string url)
    {
        Bitmap imageBitmap = null;

        using (var webClient = new WebClient())
        {
            var imageBytes = await webClient.DownloadDataTaskAsync(url);
            if (imageBytes != null && imageBytes.Length > 0)
            {
                imageBitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
            }
        }

        return imageBitmap;
    }

But I cache all images using a dictionary:

private static Dictionary<string, Bitmap> autoCompleteImages = new Dictionary<string, Bitmap>();

And on GetView method I use "holderView" and this piece of code to get cached images from dictionary:

if (autoCompleteImages.ContainsKey(this.autocompleteSearches[position].PicUrl))
            {
                holder.imageView.SetImageBitmap(autoCompleteImages[this.autocompleteSearches[position].PicUrl]);
            }
            else
            {
                this.UpdateImage(holder, position);
            }

Here UpdateImage method:

private async void UpdateImage(ViewHolderAutoComplete holder, int position)
    {
        autoCompleteImages[this.autocompleteSearches[position].PicUrl] = await GetImageBitmapFromUrl(this.autocompleteSearches[position].PicUrl);
        holder.imageView.SetImageBitmap(autoCompleteImages[this.autocompleteSearches[position].PicUrl]);
    }

Yes you are right. One of my friend is using your solution. You rock buddy.. :D. Many many thanks for the solution.. :D — Bikash, Dec 02 '15 at 12:55
U're welcome :) and remember if you like it please vote for it ;) — SergioZgz, Dec 02 '15 at 13:01
@Bikash, don't do this please. Overall reinventing the wheel is always a bad idea and there is a reason.why Square defined entire library for that. I do understand the whim to implement and control everything yourself, it took me long time to get over. — Boris Strandjev, Dec 02 '15 at 14:01
Boris if you think that... then dont use your solution or mine... just use mvvmcross with mvxlistview and mvximage with download cache... I think that the correct way is understand how to do that and then if you want, search and use that framework which can help you. With this code for example you could undestand what do you need to change if you need add a custom header to request the image from a server... — SergioZgz, Dec 03 '15 at 09:24

How to make Faster loading image from url in Gridview android xamarin?

2 Answers2