Android Simple GridView Example - ANDROID - Helper

Tuesday, April 26, 2011

Android Simple GridView Example


SIMPLE GRIDVIEW

SOURCE CODE [main.xml] is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
android:layout_width="fill_parent"
                android:layout_height="fill_parent">

                <TextView android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
android:text="@string/hello" />

                <GridView android:id="@+id/gridview"
android:layout_width="fill_parent"
                                android:layout_height="fill_parent"
android:numColumns="auto_fit"
                                android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
                                android:columnWidth="90dp"
android:stretchMode="columnWidth"
                                android:gravity="center" />

</LinearLayout>

SOURCE CODE [GridViewExample.java] is

package com.GridViewExample;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class GridViewExample extends Activity
{

public void onCreate(Bundle savedInstanceState)
{
                                super.onCreate(savedInstanceState);
                                setContentView(R.layout.main);

GridView gridview = (GridView) findViewById(R.id.gridview);
                                 gridview.setAdapter(new ImageAdapter(this));
}

public class ImageAdapter extends BaseAdapter
{
private Context mContext;

public ImageAdapter(Context c)
{
mContext = c;
                                }

                                public int getCount()
{
                                                return mThumbIds.length;
                                }

public Object getItem(int position)
{
                                                return null;
                                }

public long getItemId(int position)
{
return 0;
                                }

// create a new ImageView for each item referenced by the Adapter
                                public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
                                                if (convertView == null)
{
 imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView) convertView;
                                                }
imageView.setImageResource(R.drawable.icon);
                                                return imageView;
                                }
private Integer[] mThumbIds = {R.drawable.icon, R.drawable.icon,
R.drawable.icon, R.drawable.icon,
                                                R.drawable.icon, R.drawable.icon,
                                                R.drawable.icon, R.drawable.icon,
                                                R.drawable.icon, R.drawable.icon};
}   

}

The OUTPUT will be


https://lh5.googleusercontent.com/_xnrF0YSUul8/TbaJzeBhTXI/AAAAAAAAAH4/B-u0yNQRLWQ/simple_gridview.png

9 comments:

  1. Hi Buddy , Great Tuts for beginners but small issue i came across while reviewing it,

    // Static one, loads the same image in all the views
    imageView.setImageResource(R.drawable.icon);

    Instead, you can go with
    // Loads the different set of images when your Integer array
    // references that contains different values.
    imageView.setImageResource(mThumbIds[position]);

    Hope this would help somebody..

    Thanks....

    With Regards,
    Nandagopal T

    ReplyDelete
  2. Hi Nandagopal,

    Thanks for your comment. I'll post some more samples soon..

    Welcome. :)

    ReplyDelete
  3. Thanks for this example. I have a question. These images are stored in drawable folder. But what if the images are being loaded from some server...???
    What changes we would do in this code...???

    ReplyDelete
  4. Hi Khawar,

    To load an image from other server, we need to first convert the image URL to Bitmap object. Then load it to an ImageView.

    I think this may help you.

    public void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    ImageView iv = (ImageView) findViewById(R.id.imageView1);

    Bitmap b = getBitmapFromURL("http://www.markpascua.com/wp-content/android.jpg");

    iv.setImageBitmap(b);
    }

    public static Bitmap getBitmapFromURL(String src)
    {
    try {
    URL url = new URL(src);
    HttpURLConnection connection = (HttpURLConnection) url.openConnection();
    connection.setDoInput(true);
    connection.connect();
    InputStream input = connection.getInputStream();
    Bitmap myBitmap = BitmapFactory.decodeStream(input);
    return myBitmap;
    } catch (IOException e) {
    e.printStackTrace();
    return null;
    }

    ReplyDelete
  5. how to load images from directory "/sdcard/myfolder" to grid view

    ReplyDelete
  6. Hi, Can I know how to fit the gridview exactly to the screen without scrollbar.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. can you tell me how to share image from gridview to any other person via facebook twitter

    ReplyDelete
  9. can you tell me how to share image from gridview to any other person via facebook twitter

    ReplyDelete