Image Gallery View In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).

In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Prerequisites

Visual Studio 2015 Update 3.

The steps, mentioned below, are required to be followed in order to create the Image Gallery View in Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).



Step 2

After opening New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app a name (Ex:sample) and give the the path of your project. Afterwards, click OK.



Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

Now, select Resource-->Layout-->double click to open main.axml page. If you want to select source, write XAML code.

Choose the Designer Window, if you want to design so you can design your app.



Step 4

After opening the main.axml file will open the main page designer. You can design the page, if you want.



Now, delete the Default hello world button. Go to the source panel and you can see the button coding. You need to delete it.

After deleting XAML code, delete C# button action code.

Go to the MainActivity.cs page. You need to delete the button code.

Step 5

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls.

You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls.

You need to drag and drop the Gallery.

Step 6

Now, go to the properties Window. You need to edit the Gallery Id value(EX: android:id="@+id/gallery").



Step 7

In this step, go to the Main.axml page Source Panel. Note, the Gallery Id value.



Main.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px">
    <Gallery android:id="@+id/gallery" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>

Step 8

In this step, add the Images form your local system.

Go to Solution Explorer-->Resource-->Drawable-->Right Click-->Add-->Exsisting Item (Shift+Alt+A).



Step 9

Now you can select the desired images and click Add.



Step 10

In this step, add one class file and its name is ImageAdapter.

Go to Solution Explorer-->Resource-->Right Click-->Add-->New Item (Ctrl+shift+A).



Step 11

Now, select the class file, give the name ImageAdapter.cs and click add.



Step 12

After creating the ImageAdapter.cs, write one sub class, whose name is BaseAdapter and create one variable context.



Step 13

Now, write the code, mentioned below from ImageAdapter.cs class file.

ImageAdapter.cs

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 i = new ImageView(context);
            i.SetImageResource(thumbIds[position]);
            i.LayoutParameters = new Gallery.LayoutParams(400, 400);
            i.SetScaleType(ImageView.ScaleType.FitXy);
            return i;
        }
        // references to our images
    int[] thumbIds = {
        Resource.Drawable.image1,
        Resource.Drawable.image2,
        Resource.Drawable.image3,
        Resource.Drawable.image4,
        Resource.Drawable.image5,
        Resource.Drawable.image6,
        Resource.Drawable.image7
    };
}

Step 14

Now, go to the MainActivity.cs page. Write the code, mentioned below from OnCreate() Method.

MainActivity.cs

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

Step 15

If you have Android Virtual device, run the app on it, else connect your Android phone and run the app on it.

Simply connect your phone and go to Visual Studio. The connected phone will show up in the Run menu. 

(Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.



Output

After a few seconds, the app will start running on your phone.

You will see the Image Gallery view successfully.



Slide to change the images.



Summary

This was the process to create the Image Gallery View in Xamarin Android app, using Visual Studio 2015.