Introduction

In this article, we are going to learn about how to create a custom grid view in Xamarin Android

Step 1

Create your Xamarin Android solution in Visual Studio/Xamarin Studio

Step 2
Create a gridview in Main.axml


Step 3
Create a item class that holds name property and resource property
  1. public class Item
  2. {
  3. public string Name { get; set; }
  4. public int Resource { get; set; }
  5. }
Step 4
Create a custom image View that display the image in full view.
  1. public class SquareImageView : ImageView
  2. {
  3. public SquareImageView(Context context, IAttributeSet atrs) : base(context, atrs)
  4. {
  5. }
  6. public SquareImageView(Context context, IAttributeSet atrs, int defStyle) : base(context, atrs, defStyle)
  7. {
  8. }
  9. protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
  10. {
  11. base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
  12. SetMeasuredDimension(MeasuredWidth, MeasuredHeight);
  13. }
  14. }
Step 5
Now create a custom layout griditem.axml that fits into the grid view created in Main.axml
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent">
  5. <"your-namespace".SquareImageView
  6. android:id="@+id/picture"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:scaleType="centerCrop"/>
  11. <TextView
  12. android:id="@+id/text"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:textSize="12dp"
  16. android:gravity="center"
  17. android:layout_gravity="bottom"
  18. android:textColor="@android:color/white"
  19. android:background="#55000000"/>
  21. </FrameLayout>
Step 6
Now create an adapter ImageAdapter class for gridview created in Main.axml. This ImageAdapter inflates griditem.axml and returns the view.
  1. public class ImageAdapter : BaseAdapter
  2. {
  3. private Activity curvedActivity;
  4. private List<Item> mItems;
  6. public ImageAdapter(Activity curvedActivity)
  7. {
  8. this.curvedActivity = curvedActivity;
  9. mItems = new List<Item>();
  10. mItems.Add(new Item { Name = "Red", Resource = Resource.Drawable.sample_3 });
  11. mItems.Add(new Item { Name = "Magenta", Resource = Resource.Drawable.sample_4 });
  12. mItems.Add(new Item { Name = "Dark", Resource = Resource.Drawable.sample_3 });
  13. mItems.Add(new Item { Name = "Green", Resource = Resource.Drawable.sample_3 });
  14. mItems.Add(new Item { Name = "Yellow", Resource = Resource.Drawable.sample_4 });
  15. }
  17. public override int Count => mItems.Count;
  19. // public override int Count => ;
  21. public override Object GetItem(int position)
  22. {
  23. return null;
  24. }
  26. public override long GetItemId(int position)
  27. {
  28. return 0;
  29. }
  31. public override View GetView(int position, View convertView, ViewGroup parent)
  32. {
  33. View v = convertView;
  34. if (v == null)
  35. {
  36. v = curvedActivity.LayoutInflater.Inflate(Resource.Layout.griditem, null);
  37. }
  38. v.FindViewById<ImageView>(Resource.Id.picture).SetImageResource(mItems[position].Resource);
  39. v.FindViewById<TextView>(Resource.Id.text).Text = mItems[position].Name;
  40. return v;
  41. }
  42. }
Step 7
Now we have to set adapter to the gridview created in main.axml
  1. var gridview = FindViewById<GridView>(Resource.Id.gridview);
  2. gridview.Adapter = new ImageAdapter(this);
  3. gridview.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs args)
  4. {
  5. Toast.MakeText(this, args.Position.ToString(), ToastLength.Short).Show();
  6. };
Step 8
Now run to see the output.