Android and Java solution: BASIC GRID VIEW LAYOUT

Friday, 27 December 2013

BASIC GRID VIEW LAYOUT

Gridview Demo

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-hdpifolder.
3. Create a new XML layout under layout and name it as grid_layout.xml (Right Click) layout ⇒ New ⇒ Android XML File

<?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.javapackage 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.nishal;

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));

    }

}