Android platform provides an adapterview called GridView.

GridView can be used to display data in two dimensional format using Grids.

Gridview is a popular view and in this example we see how to fill it with data and handle onClick events.

Uses of GridView

To render data in a two dimensional grids of data.

Advantages of GridView

No. Advantages
1. Can be used to display any list of data.
2. Can be customized with custom views.
3. Supports various adapter instances like ArrayAdapter and BaseAdapter.
4. Easy to create and use.

1. Create Project

  1. Create New Project.
  2. Choose blank app:

2. Create User Interface

User interfaces in Xamarin Android can be created either imperatively by java code or declaratively by AXML, Microsoft’s subset of XML(eXtensible Markup Language).

(a). Main.axml

This is our MainActivity layout.

Here are it’s roles:

No. Responsibility
1. Define a TextView to display our header.
2. Define a GridView to display our list items. 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009688">
    <TextView
        android:id="@+id/headerLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:fontFamily="casual"
        android:text="Programming Languages GridView"
        android:textAllCaps="true"
        android:textSize="30sp"
        android:textStyle="bold" />
    <GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:numColumns="3"
        android:textStyle="bold"
        android:layout_below="@+id/headerLabel"
        android:layout_marginTop="33dp" />
</RelativeLayout>

3. MainActivity.cs

Our MainActivity class.

Here are the roles of this class:

No. Responsibility
1. Allow itself to become a xamarin android activity component by inheriting from Android.App.Activity.
2. Listen to activity creation callbacks by overrding the OnCreate() method.
3. Invoke the OnCreate() method of the base Activity class and pass it a Bundle object we’ve received.
4. Inflate the Main.axml into a View object and set it as the content view of this activity.
5. Maintain a readonly JavaList object that will hold our list of languages.
6. Define a method that will fill our JavaList with languages to be displayed in our GridView.
7. Find our GridView from our Layout by its id and hold it in a GridView object.
8. Instantiate our ArrayAdapter, passing it our JavaList of languages.
9. Set the adapter instance as a property of our Gridview.
10. Listen to GridView click items and show Toast messages. 
using System;
using Android.App;
using Android.Runtime;
using Android.Widget;
using Android.OS;

namespace Simple_GridView
{
    [Activity(Label = "Simple_GridView", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        readonly JavaList<String> languages = new JavaList<string>();

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

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            //GRIDVIEW
            GridView gv = FindViewById<GridView>(Resource.Id.gv);

            //FILL DATA
            FillData();

            //ADAPTER
            ArrayAdapter<String> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, languages);
            gv.Adapter = adapter;

            gv.ItemClick += gv_ItemClick;
        }

        void gv_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            Toast.MakeText(this, languages[e.Position], ToastLength.Short).Show();

        }

        private void FillData()
        {
            languages.Clear();
            languages.Add("C#");
            languages.Add("F#");
            languages.Add("VB.NET");
            languages.Add("Java");
            languages.Add("Kotlin");
            languages.Add("Scala");
            languages.Add("Groovy");
            languages.Add("Javascript");
            languages.Add("Coffescript");
            languages.Add("TypeScript");
            languages.Add("Go");
            languages.Add("PHP");
            languages.Add("C");
            languages.Add("C++");
            languages.Add("Perl");
            languages.Add("Python");
            languages.Add("Ruby");
            languages.Add("Prolog");
            languages.Add("Scheme");
            languages.Add("Erlang");
            languages.Add("Dart");
            languages.Add("Cobol");
            languages.Add("Lisp");
            languages.Add("Pascal");
            languages.Add("Fortran");
            languages.Add("Algol");

        }
    }
}

Best Regards,
Oclemy.

Categorized in:

Xamarin Android