-
Create new Android Project call AndroidGridViewExample,Download 15 images and put into res/drawable folder and create gridlayout.xml file and modify as given below.
<?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="100dp"
android:horizontalSpacing="5dp"
android:verticalSpacing="5dp"
android:gravity="center"
android:stretchMode="columnWidth" >
</GridView>
-
Now create one new layout in res/layout folder and give name image.xml file for displaying Full screen image like second image display below and modify source as above.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView android:id="@+id/full_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
-
Create ImageAdapter.java in project src folder and modify as below also modify name of your images in array.
package com.idroid.gridview;
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;
public Integer[] mThumbIds = {
R.drawable.image1, R.drawable.image2,
R.drawable.image3, R.drawable.image4,
R.drawable.image5, R.drawable.image6,
R.drawable.image7, R.drawable.image8,
R.drawable.image9, R.drawable.image10,
R.drawable.image11, R.drawable.image12,
R.drawable.image13, R.drawable.image14,
R.drawable.image15
};
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;
}
}
-
Create AndroidGridViewActivity.java file in src folder used for displaying GridView and set GriedView Adapter as we have created previously.
package com.idroid.gridview;
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 AndroidGridViewActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gridlayout);
GridView gridView = (GridView) findViewById(R.id.grid_view);
gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
// Sending image id to FullScreenActivity and pass index
Intent i = new Intent(getApplicationContext(), FullSizeImageActivity.class);
i.putExtra("id", position);
startActivity(i);
}
});
}
}
-
Finally create new .java file for displaying Full size image and modify as above code.
package com.idroid.gridview;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class FullSizeImageActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.image);
// get intent data
Intent i = getIntent();
// Selected image id
int position = i.getExtras().getInt("id");
ImageAdapter imageAdapter = new ImageAdapter(this);
ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
imageView.setImageResource(imageAdapter.mThumbIds[position]);
}
}
-
Now Build and run project in Simulator you can see the below like output and when click on image it is display full screen image on next Activity.
