title: Display Bitmap images in a GridView
body: <p>In Xamarin, I have an <code>Activity</code> that has a <code>GridView</code> and a list of image web addresses. A list of <code>Bitmap</code> objects are retrieved and then displayed in the <code>GridView</code> from these web addresses.</p>
  
  <p>Here is my <code>MainActivity</code> code:</p>
  
  <pre><code>public class MainActivity : Activity
  {
      GridView gridView;
      List&lt;String&gt; bitmapUris;
      List&lt;Bitmap&gt; gridViewItems;
  
      protected override void OnCreate (Bundle bundle)
      {
          base.OnCreate (bundle);
  
          SetContentView (Resource.Layout.Main);
          gridView = FindViewById&lt;GridView&gt;(Resource.Id.gridView);
  
          bitmapUris = new List&lt;string&gt; ();
          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&lt;Bitmap&gt; GetBitmapImages(List&lt;String&gt; bitmapUris)
      {
          List&lt;Bitmap&gt; images = new List&lt;Bitmap&gt; ();
          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 &amp;&amp; imageBytes.Length &gt; 0)
              {
                  imageBitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
              }
          }
  
          return imageBitmap;
      }
  }
  </code></pre>
  
  <p>Here is my <code>GridViewAdapter</code> code:</p>
  
  <pre><code>public class GridViewAdapter : BaseAdapter
  {
      Activity context;
      List&lt;Bitmap&gt; gridViewtems;
  
      public GridViewAdapter (Activity context, List&lt;Bitmap&gt; 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&lt;ImageView&gt; (Resource.Id.image).SetImageBitmap (gridViewtems[position]);
          view.FindViewById&lt;TextView&gt; (Resource.Id.text).Text = position.ToString();
          return view;
  
      }
  }
  </code></pre>
  
  <p>Currently, when the application loads up, the screen goes blank until the <code>Bitmaps</code> are retrieved from the web addresses.</p>
  
  <p>My question is this: How can I display the <code>Activity</code> with place holders for the <code>GridView</code> items, and when each <code>Bitmap</code> is retrieved, the relevant <code>GridView</code> item image is populated?
  Is this done in the <code>MainActivity</code>, or in the <code>GridViewAdapter</code>?</p>
  
  <p>Thanks in advance</p>