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

Question

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;
        }
    }
}

Hi Jayson, take a look and this and try the solution: https://stackoverflow.com/questions/1585985/how-to-use-the-webclient-downloaddataasync-method-in-this-context/38885721#1585994 — AarónBC., May 09 '18 at 02:37

score 0 · Accepted Answer · answered May 09 '18 at 07:01

0

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 May 09 '18 at 07:01

Tolulope

488
1
5
19

Dude are you a god? You solved my two questions... I don't know what to say but i really owe you. Damn, you are a god. Really really thank you man. You saved my life again... – Jayson E Garcia May 09 '18 at 07:16
Btw. My string name is really stored from the database and not in array. That is my example. I have also problem with my database connection in sql. When my database connection was open like "conn.open()". It also lag before it load to the activity or fragment? or before the page stored the data. Do you know how can i also reduce the freeze when connection is open? Or its like insert image loader like "gif". – Jayson E Garcia May 09 '18 at 07:26
Ok, I'll look into that later – Tolulope May 09 '18 at 08:03
Okay my bro :). Hope to fix this as well – Jayson E Garcia May 09 '18 at 08:40

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

1 Answers1