Create an Image GridView Control In Xamarin Android App Using Visual Studio 2015 Update 3

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps. (Ex. Windows phone,android,ios) A code sharing concept is used. Xamarin studio is avalable in visual studio also.

Image GridView control is called if you want to view images which are grid type.

Prerequisites

• Visual Studio 2015 update 3 

The following steps need to be followed in order to create an Image GridView Control in xamarin android app using visual studio 2015 update 3.

Step 1 - Click file--> Select New--> Next select Project. Click the project after opening all types of projects in visual studio.

or click (Ctrl+Shift+N)



Step 2 - After opening the New Project Select Installed-->Templates-->Visual c#-->Android-->choose the Blank App (Android).

Next give your android app a name(Ex:sample) and give path of your project. After giving all click ok.



Step 3 - Next go to the solution explorer. Solution explorer has the all files and sources in your project.

Next Select Resource-->Layout-->double click to open main.axml page. You want to select source to write the xaml code. If you want design choose the designer window where you can design your app.



Step 4 - After opening, the main.axml file will open the main page designer. In this page choose which type you want. Next you will Delete the Default hello world button -- go to the source panel you can see the button coding and you will delete it. After deleting the xaml code next delete the c# button action code. Go to the MainActivity.cs page. You will delete the button code.

Step 5 - Next go to the toolbox window which has all types of the tools and control.You will go to the toolbox window. Next scroll down  and you will see the all tools and controls.

You will drag and drop the GridView control in your main.axml page.



Step 6 - After dragging and dropping the GridView control  you can go to the Main.axml page source and you will give the gridview id(Ex: android:id="@+id/gridView1"). and check the following tags.

Main.xaml

<GridView

android:minWidth="25px"

android:minHeight="25px"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/gridView1"

android:columnWidth="90dp"

android:numColumns="auto_fit"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:stretchMode="columnWidth"

android:gravity="center"/>

Step 7 - Next add images in your local system.

Go to the solution explorer-->Resource--> select Drawable and right click the folder--> add--> Existing item. or (Shift+Alt+A).



Step 8 - Next go to your images location(path) and choose which images you want select and click the add button.



Step 9 - Next go to rename your images, Right click the image select rename and  you will renam it(Ex: sample_1).



Step 10 - After renaming your images go to the MainActivity.cs page you will write the following code, or copy paste between OnCreate(Bundle bundle)method .

MainActivity.cs

public class MainActivity: Activity {
        protected override void OnCreate(Bundle bundle) {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            var gridview1 = FindViewById < GridView > (Resource.Id.gridview1);
            gridview1.Adapter = new ImageAdapter(this);
            gridview1.ItemClick += delegate(object sender, AdapterView.ItemClickEventArgs args) {
                Toast.MakeText(this, args.Position.ToString(), ToastLength.Short).Show();
            };
        }
    }
    // write public class for Image Adapter
public class ImageAdapter: BaseAdapter {
    Context context;
    public ImageAdapter(Context c) {
        context = c;
    }
    public override int Count {
        get {
            return thumbIds.Length;
        }
    }
    public override Java.Lang.Object GetItem(int position) {
        return null;
    }
    public override long GetItemId(int position) {
            return 0;
        }
        // create a new ImageView for each item referenced by the Adapter
    public override View GetView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
            if (convertView == null) { // if it's not recycled, initialize some attributes
                imageView = new ImageView(context);
                imageView.LayoutParameters = new GridView.LayoutParams(85, 85);
                imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
                imageView.SetPadding(8, 8, 8, 8);
            } else {
                imageView = (ImageView) convertView;
            }
            imageView.SetImageResource(thumbIds[position]);
            return imageView;
        }
        // references to our images
    int[] thumbIds = {
        Resource.Drawable.sample_1,
        Resource.Drawable.sample_2,
        Resource.Drawable.sample_3,
        Resource.Drawable.sample_4,
        Resource.Drawable.sample_1,
        Resource.Drawable.sample_2,
    };
}

Step 11 - Next go to the MainActivity.cs page. You will see the images and image code without error.



Step 12 - If you have android virtual device you can run the virtual device. If you don't have it, run your Android phone.

Connect android phone the via USB cable in your system or laptop. The andriod mobile phone will show the message Allow USB debugging?.

If you always run the app in this mobile check the always allow option from this computer and next click the ok button.

Next go to visual studio.

If connecing your Andriod phone show the run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). if showing the phone in run option.

Next go to click the connected android phone it will run in your android phone.



Output

This will take some time  because the app will be built in your phone.

After running your app in your phone show the app with Gridview Images

(portrait)



(landscape)



Summery - So this was the process of creating an Image GridView Control in xamarin android app using visual studio 2015 update 3.