Grid View With Multiple Rows And Two Columns Xamarin.Android

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

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

 

 

public class Item
    {
        public string Name { get; set; }
        public int Resource { get; set; }
    }

Step 4

 

Create a custom image View that display the image in full view.

 

 

public class SquareImageView : ImageView
{
    public SquareImageView(Context context, IAttributeSet atrs) : base(context, atrs)
    {
    }
    public SquareImageView(Context context, IAttributeSet atrs, int defStyle) : base(context, atrs, defStyle)
    {
    }
    protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
        SetMeasuredDimension(MeasuredWidth, MeasuredHeight);
    }
}

Step 5

   

Now create a custom layout griditem.axml  that fits into the grid view created in Main.axml

 

 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

  <"your-namespace".SquareImageView
      android:id="@+id/picture"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:scaleType="centerCrop"/>

  <TextView
      android:id="@+id/text"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textSize="12dp"
      android:gravity="center"
      android:layout_gravity="bottom"
      android:textColor="@android:color/white"
      android:background="#55000000"/>

</FrameLayout>

Step 6 

     

Now create an adapter ImageAdapter class for gridview created in Main.axml. This ImageAdapter inflates griditem.axml and returns the view.

public class ImageAdapter : BaseAdapter
    {
        private Activity curvedActivity;
        private List<Item> mItems;

        public ImageAdapter(Activity curvedActivity)
        {
            this.curvedActivity = curvedActivity;
            mItems = new List<Item>();
            mItems.Add(new Item { Name = "Red", Resource = Resource.Drawable.sample_3 });
            mItems.Add(new Item { Name = "Magenta", Resource = Resource.Drawable.sample_4 });
            mItems.Add(new Item { Name = "Dark", Resource = Resource.Drawable.sample_3 });
            mItems.Add(new Item { Name = "Green", Resource = Resource.Drawable.sample_3 });
            mItems.Add(new Item { Name = "Yellow", Resource = Resource.Drawable.sample_4 });
        }

        public override int Count => mItems.Count;

        // public override int Count => ;

        public override 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 v = convertView;
            if (v == null)
            {
                v = curvedActivity.LayoutInflater.Inflate(Resource.Layout.griditem, null);
            }
            v.FindViewById<ImageView>(Resource.Id.picture).SetImageResource(mItems[position].Resource);
            v.FindViewById<TextView>(Resource.Id.text).Text = mItems[position].Name;
            return v;
        }
    }

 

 

Step 7

   

Now we have to set adapter to the gridview created in main.axml

var gridview = FindViewById<GridView>(Resource.Id.gridview);
           gridview.Adapter = new ImageAdapter(this);
           gridview.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs args)
           {
               Toast.MakeText(this, args.Position.ToString(), ToastLength.Short).Show();
           };

 

 

Step 8

   

Now run to see the output.