Display Bitmap images in a GridView

Question

In Xamarin, I have an Activity that has a GridView and a list of image web addresses. A list of Bitmap objects are retrieved and then displayed in the GridView from these web addresses.

Here is my MainActivity code:

public class MainActivity : Activity
{
    GridView gridView;
    List<String> bitmapUris;
    List<Bitmap> gridViewItems;

    protected override void OnCreate (Bundle bundle)
    {
        base.OnCreate (bundle);

        SetContentView (Resource.Layout.Main);
        gridView = FindViewById<GridView>(Resource.Id.gridView);

        bitmapUris = new List<string> ();
        bitmapUris.Add ("http://images4.fanpop.com/image/photos/15000000/My-Sample-Pictures-lexi-and-sophie-15061826-1024-768.jpg");
        bitmapUris.Add ("http://www.cameraegg.org/wp-content/uploads/2013/08/AF-S-DX-NIKKOR-18-140mm-f-3.5-5.6G-ED-VR-sample-images-1.jpg");
        bitmapUris.Add ("http://upload.wikimedia.org/wikipedia/en/5/5d/The_Samples-Outpost.jpg");
        bitmapUris.Add ("http://www.1800postcards.com/images/samples/sample_kits2.jpg");

        gridViewItems = GetBitmapImages (bitmapUris);
        gridView.Adapter = new GridViewAdapter (this, gridViewItems);
    }

    List<Bitmap> GetBitmapImages(List<String> bitmapUris)
    {
        List<Bitmap> images = new List<Bitmap> ();
        Bitmap image;
        foreach (var uri in bitmapUris) 
        {
            image = GetImageBitmapFromUri (uri);
            images.Add (image);
        }
        return images;
    }

    private Bitmap GetImageBitmapFromUri(string uri)
    {
        Bitmap imageBitmap = null;

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

        return imageBitmap;
    }
}

Here is my GridViewAdapter code:

public class GridViewAdapter : BaseAdapter
{
    Activity context;
    List<Bitmap> gridViewtems;

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

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

    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 = convertView;
        if (view == null)
            view = context.LayoutInflater.Inflate(Resource.Layout.GridViewItemWithImageAndText, null);
        view.FindViewById<ImageView> (Resource.Id.image).SetImageBitmap (gridViewtems[position]);
        view.FindViewById<TextView> (Resource.Id.text).Text = position.ToString();
        return view;

    }
}

Currently, when the application loads up, the screen goes blank until the Bitmaps are retrieved from the web addresses.

My question is this: How can I display the Activity with place holders for the GridView items, and when each Bitmap is retrieved, the relevant GridView item image is populated? Is this done in the MainActivity, or in the GridViewAdapter?

Thanks in advance

use lazy loading http://stackoverflow.com/a/559781/964741 – RajaReddy PolamReddy Jun 19 '14 at 05:44 — RajaReddy PolamReddy, Jun 19 '14 at 05:44

score 2 · Answer 1 · answered Jun 19 '14 at 05:53

2

Try to use Universal Image Loader for showing images from url to your GridView.

Refer this: https://github.com/nostra13/Android-Universal-Image-Loader

answered Jun 19 '14 at 05:53

Krupa Patel

3,309
3
23
28

Thanks. How can I add the Universal Image Loader to my Xamarin project? I see that there are many .jar files in the download folder. – Simon Jun 19 '14 at 06:31
You can find download ZIP option at right hand side corner at last.When you download this you will find few files in src folder and universal-image-loader-1.9.2-SNAPSHOT-with-sources.jar in libs folder. You need to use that jar file – Krupa Patel Jun 19 '14 at 06:33
I have that file, where do I place it to use the class in Xamarin? – Simon Jun 19 '14 at 06:34
place that file in your libs folder – Krupa Patel Jun 19 '14 at 06:36
I do not currently have a libs folder, where should I create this? – Simon Jun 19 '14 at 06:39
Refere this: http://www.itexico.com/blog/bid/100447/Android-Wear-Developer-Preview-Using-Xamarin-Jar-Binding – Krupa Patel Jun 19 '14 at 06:45
Thanks. Can you please have a look at this link of mine: http://stackoverflow.com/questions/24301216/add-a-jar-file-to-my-xamarin-project? – Simon Jun 20 '14 at 05:24

Display Bitmap images in a GridView

1 Answers1