Android GridView Layout Tutorial

Android GridView Layout Tutorial

---

GridView layout in one of the most useful layouts in android. Gridview is mainly useful when we want show data in grid layout like displaying images or icons. This layout can be used to build applications like image viewer, audio or video players in order to show elements in grid manner.

Basic GridView Layout

1. Create a new project by going to File ⇒ New Android Project and fill required details. (I named my main activity as AndroidGridLayoutActivity.java) 2. Prepare your images which you want to show in grid layout and place them in res ⇒ drawable-hdpi folder. 3. Create a new XML layout under layout and name it as grid_layout.xml (Right Click) layout ⇒ New ⇒ Android XML File

grid_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/grid_view"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:numColumns="auto_fit"

android:columnWidth="90dp"

android:horizontalSpacing="10dp"

android:verticalSpacing="10dp"

android:gravity="center"

android:stretchMode="columnWidth" >

</GridView>

4. Create a new Class by right clicking on (Right Click) src ⇒ package folder ⇒ New ⇒ Class and name your class as ImageAdapter.java 5. Extend your ImageAdapter.java class from BaseAdapter and fill it with following code.

ImageAdapter.java

package com.example.androidhive;

import android.content.Context;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {

private Context mContext;

// Keep all Images in array

public Integer[] mThumbIds = {

R.drawable.pic_1, R.drawable.pic_2,

R.drawable.pic_3, R.drawable.pic_4,

R.drawable.pic_5, R.drawable.pic_6,

R.drawable.pic_7, R.drawable.pic_8,

R.drawable.pic_9, R.drawable.pic_10,

R.drawable.pic_11, R.drawable.pic_12,

R.drawable.pic_13, R.drawable.pic_14,

R.drawable.pic_15

};

// Constructor

public ImageAdapter(Context c){

mContext = c;

}

@Override

public int getCount() {

return mThumbIds.length;

}

@Override

public Object getItem(int position) {

return mThumbIds[position];

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(mContext);

imageView.setImageResource(mThumbIds[position]);

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setLayoutParams(new GridView.LayoutParams(70, 70));

return imageView;

}

}

6. Open your main activity class as shown below.

AndroidGridLayoutActivity.java

package com.example.androidhive;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.GridView;

public class AndroidGridLayoutActivity extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.grid_layout);

GridView gridView = (GridView) findViewById(R.id.grid_view);

// Instance of ImageAdapter Class

gridView.setAdapter(new ImageAdapter(this));

}

}

Run your project