Grid View With Multiple Rows And Two Columns 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

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

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.

2 Comments

Join the conversation! Your thoughts help the community grow.

santhosh PS8y ago
Thanks Dude! Nice article. It will be helpful if you could share source code as well.
Techno (Dule)8y ago
It is a lot easier to post source code, since your steps are not quite ok; screenshots are not following code in frames, they are not in copy/paste-able, and you commented where to put code very badly.