Display images inside a GridView in Android using VS 2010

Manish Tewatia

10 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam10y ago
Good One, Thanks for sharing
Pranav J.Dev10y ago
Good one
Vinicius Vendramel13y agoedited
Donwload do code? Solution? please!!! I need i lot!!!
dipali patel14y ago
i am not getting image from mysql to android.... i have already all try from myside... but i have not be success in this problem.. so plz solve this problem.. and submit in my mail id:[email protected]
Karthikeyan Anbarasan15y ago
Nice article Manish...
- Manish Tewatia15y ago
  Thank you Karthikeyan.......:-)
Jaganathan Bantheswaran15y ago
Please tell me how to create emulator image for Android. I cant create. If i run the SDK Manager it giving error like GetTempFileName failed.
- Manish Tewatia15y ago
  Jaganathan Please follow the steps of this article:- http://www.c-sharpcorner.com/UploadFile/manish1231/7471/ As per your error, your virtual device is not Properly created. So, first create it Properly using above article, I am sure you will be able to run Android application....
Angelina Erin15y ago
Good One
- Manish Tewatia15y ago
  Thank you Angelina.....

Introduction

The GridView view mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. The column cells and the column header of a GridViewColumn have the same width. By default, each column sizes its width to fit its content. Optionally, you can set a column to a fixed width. Related data content displays in horizontal rows.

GridView in Android

GridView is a ViewGroup in which you can displays items in a two-dimensional and also scrollable grid. By using ListAdapter you can add items in the grid the items are automatically inserted to the layout. GridView is basically used to create more interactive app widgets on the users Home screen. You can use the GridView view together with ImageView views to display a series of images.

The table below shows the XML Attributes which you have to use while working with GridView XML file:

Attribute Name	Related Method	Description
android:columnWidth	setColumnWidth(int)	Used for width for each column.
android:gravity	setGravity(int)	Used for gravity within each cell.
android:horizontalSpacing	setHorizontalSpacing(int)	Used for default horizontal spacing between columns.
android:numColumns	setNumColumns(int)	Used for how many columns want to show.
android:stretchMode	setStretchMode(int)	Used for fill the available empty space.
android:verticalSpacing	setVerticalSpacing(int)	Used for default vertical spacing between rows.

I am trying to explain to you how to use GridView in Android by the given example below:

Steps to create GridView in Android

First, create a new android application give the name to project like WelcomeGridView
Save the image files into the project's Resources/Drawable/ directory
Now Edit your Resources/Layout/Main.axml file
1. <?xml version="1.0" encoding="utf-8"?>
3. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
4. android:id="@+id/PhotoGridView"
5. android:layout_width="fill_parent"
6. android:layout_height="fill_parent"
7. android:columnWidth="100dp"
8. android:numColumns="auto_fit"
9. android:verticalSpacing="15dp"
10. android:horizontalSpacing="15dp"
11. android:stretchMode="columnWidth"
12. android:gravity="center"
13. />
Now in OnCreate() method call the GridView from the layout using findViewById(int) and create a source for all items through which items to be displayed in the grid. One more interesting thing we do here, using setOnItemClickListener() method which is passed a new AdapterView.OnItemClickListener. This anonymous instance defines the onItemClick() callback method to show a Toast that displays the index position of the selected item.
1. protected override void OnCreate(Bundle bundle) {
2. base.OnCreate(bundle);
3. SetContentView(Resource.Layout.Main);
4. var PhotoGridView = FindViewById < GridView > (Resource.Id.PhotoGridView);
5. PhotoGridView.Adapter = new ImageAdapter(this);
6. PhotoGridView.ItemClick += delegate(object sender, ItemEventArgs args) {
7. Toast.MakeText(this, (args.Position + 1).ToString(), ToastLength.Short).Show();
8. };
9. }
Create a new ImageView for each item referenced by the Adapter
1. public override View GetView(int position, View convertView, ViewGroup parent)
2. {
3. ImageView imageView;
4. if (convertView == null)
5. {
6. imageView = new ImageView(contextcreate);
7. imageView.LayoutParameters = new GridView.LayoutParams(90, 90);
8. imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
9. imageView.SetPadding(10, 10, 10, 10);
10. }
11. else
12. {
13. imageView = (ImageView) convertView;
14. }
15. imageView.SetImageResource(imageIds[position]);
16. return imageView;
17. }

This is the basic methods which you learn above, nowhere is the complete code:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
namespace WelcomeGridView
{
[Activity(Label = "WelcomeGridView", MainLauncher = true, Icon = "@drawable/icon")]
public class Activity1: Activity
{
protected override void OnCreate(Bundle bundle)
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
var PhotoGridView = FindViewById < GridView > (Resource.Id.PhotoGridView);
PhotoGridView.Adapter = new ImageAdapter(this);
PhotoGridView.ItemClick += delegate(object sender, ItemEventArgs args)
{
Toast.MakeText(this, (args.Position + 1).ToString(), ToastLength.Short).Show();
};
}
public class ImageAdapter: BaseAdapter
{
Context contextcreate;
public ImageAdapter(Context a)
{
contextcreate = a;
}
public override int Count
{
get
{
return imageIds.Length;
}
}
public override Java.Lang.Object GetItem(int position)
{
return null;
}
public override long GetItemId(int position)
{
return 0;
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null)
{
imageView = new ImageView(contextcreate);
imageView.LayoutParameters = new GridView.LayoutParams(90, 90);
imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
imageView.SetPadding(10, 10, 10, 10);
}
else
{
imageView = (ImageView) convertView;
}
imageView.SetImageResource(imageIds[position]);
return imageView;
}
int[] imageIds =
{
Resource.Drawable.mahesh,
Resource.Drawable.dbeniwal321,
Resource.Drawable.kartik,
Resource.Drawable.mgold,
Resource.Drawable.dhananjaycoder,
Resource.Drawable.nandi,
Resource.Drawable.praveen,
Resource.Drawable.suthish,
Resource.Drawable.nipuntomar,
Resource.Drawable.dpatra,
Resource.Drawable.jaganathan,
Resource.Drawable.abhikumarvatsa,
};
}
}
}

Run the application your grid layout should look something like this:

When you click on any image the position of the the image will show on the screen:

Happy Learning.......