Xamarin android C# image bitmap load to async, async task

Issue

I have some trouble with my project. My works everything fine but when I load the image or multiple image in single gridview in my activity or fragment, it takes 3-5 mins before my activity load. I mean the Android freezes for more than 3 mins before it load the image from the gridview in the activity.

I researched about this issue and try the code from what I searched. Trying async task. But I getting error. I'm not familiar with async or async task. I'm still a newbie with Xamarin and C# language.

Here is my code:

CustomGridViewAdapter.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Java.Lang;

namespace testing_code
{
    public class CustomGridViewAdapter : BaseAdapter
    {
        private Context context;
        private string[] gridViewString;
        //private int[] gridViewImage;
        private string[] gridViewImage;
        public CustomGridViewAdapter(Context context, string[] gridViewstr, string[] gridViewImage /*int[] gridViewImage*/)
        {
            this.context = context;
            gridViewString = gridViewstr;
            this.gridViewImage = gridViewImage;
        }
        public override int Count
        {
            get
            {
                return gridViewString.Length;
            }
        }

        public override Java.Lang.Object GetItem(int position)
        {
            return null;
        }

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

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            View view;
            LayoutInflater inflater = (LayoutInflater)context.GetSystemService(Context.LayoutInflaterService);
            if(convertView == null)
            {
                view = new View(context);
                view = inflater.Inflate(Resource.Layout.gridview_layout, null);
                TextView txtview = view.FindViewById<TextView>(Resource.Id.textViewGrid);
                ImageView imgview = view.FindViewById<ImageView>(Resource.Id.imageViewGrid);

                txtview.Text = gridViewString[position];
                //imgview.SetImageResource(gridViewImage[position]);
                imgview.SetImageBitmap(GetImageBitmapFromUrl(gridViewImage[position]));
            }
            else
            {
                view = (View)convertView;
            }
            return view;
        }

        private Android.Graphics.Bitmap GetImageBitmapFromUrl(string url)
        {
            Android.Graphics.Bitmap imageBitmap = null;

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


            }

            return imageBitmap;
        }
    }
}

Fragment1.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;
using SupportFragment = Android.Support.V4.App.Fragment;
using Android.Support.Design.Widget;
using Android.Support.V7.App;
using Android.Support.V4.Widget;
using Android.Support.V4.App;
using MySql.Data.MySqlClient;
using System.Data;

namespace EFCAndroid.Fragment_Category
{
    public class Fragment_chicken : SupportFragment
    {

        GridView gridview;

        List<string> gridviewstring = new List<string>();
        List<string> imgview = new List<string>();

        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            // Use this to return your custom view for this Fragment
            // return inflater.Inflate(Resource.Layout.YourFragment, container, false);

            // Use this to return your custom view for this Fragment
            // return inflater.Inflate(Resource.Layout.YourFragment, container, false);

            View view = inflater.Inflate(Resource.Layout.fragment_layout, container, false);

            string[] get_id_name = new string[] { "CHICKEN GRATIN WITH MIX VEGETABLES", "CHICKEN TIKKA WITH PAN GRILL BANANA WITH MIX GREENS", "CHICKEN WITH CARAMELIZED APPLE WITH POTATO WEDGES",
            "ROSEMARY CHICKEN BREAST WITH SIMPLE PASTA OR MIX", "ROASTED CHICKEN WITH FUNKY SALAD" };
            string[] get_img = new string[] { "http://soleimer.com/EFC_IMAGES_MOBILE/CATEGORY/chicken/CHICKEN_GRATIN_WITH_MIX_VEGETABLES.png", "http://soleimer.com/EFC_IMAGES_MOBILE/CATEGORY/chicken/CHICKEN_TIKKA_WITH_PAN_GRILL_BANANA_WITH_MIX_GREENS.png",
            "http://soleimer.com/EFC_IMAGES_MOBILE/CATEGORY/chicken/CHICKEN_WITH_CARAMELIZED_APPLE_WITH_POTATO_WEDGES.png", "http://soleimer.com/EFC_IMAGES_MOBILE/CATEGORY/chicken/ROASTED_CHICKEN_WITH_FUNKY_SALAD.png",
                "http://soleimer.com/EFC_IMAGES_MOBILE/CATEGORY/chicken/ROSEMARY_CHICKEN_BREAST_WITH_SIMPLE_PASTA_OR_MIX.png" };

            // ASC
            Array.Sort(get_id_name, get_img, Comparer<string>.Create((x, y) => x.CompareTo(y)));

            // DESC --> change x.compareTo(y) into y.compareTo(x)
            //Array.Sort(get_id_name, get_img, Comparer<string>.Create((x, y) => y.CompareTo(x)));

            gridviewstring.AddRange(get_id_name);
            imgview.AddRange(get_img);


            string[] GridViewStringArray = gridviewstring.ToArray();

            string[] GridImgViewArray = imgview.ToArray();

            CustomGridViewAdapter adapter = new CustomGridViewAdapter(Activity, GridViewStringArray, GridImgViewArray);
            gridview = view.FindViewById<GridView>(Resource.Id.grid_view_image_text);
            gridview.Adapter = adapter;
            return view;
        }
    }
}

Solution

For efficient image loading I recommend. Either FFimageloading or square.picasso which can be added from nuget.

Picasso can be used like this in your adapter:

Picasso.With(context)
       .Load((gridViewImage[position]))
       .Into(imgview);

Instead of this:

imgview.SetImageBitmap(GetImageBitmapFromUrl(gridViewImage[position]))

If you're using FFimageloading, do it like this:

ImageService.Instance.LoadUrl(gridViewImage[position]).Into(imgview);

Answered By - Tolulope