Skip to main content

Android Grid View


GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.
In this tutorial, We'll create a grid of image thumbnails. When an image  is clicked, a new screen  will display  full image. I am showing the Grid View Output in Emulator.
we are going to create a new Android Project in Eclipse. Click on File Menu and Select a new Android project named it as androidGridView . Now Follow the Following Procedure to show GridView inandroid.
1. Put Image in Drawable Folder   Inside your project Folder there is drawable folder. Put the image you want to show as Grid and when User click it the same image Open in Full screen.
2. Inside layout folder create two xml file  inside your project there is a folder named as layout folder. inside that folder create two new xml file named as full_image.xml and grid_layout.xml. now put   the following code inside 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:layout_marginTop="15dp"
android:numColumns="auto_fit"
android:columnWidth="100dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth" >
</GridView>
and following code inside full_image.xml
<?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="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/hello_world"/>
</LinearLayout>
3 .Now create following class inside src folder
Now right click on src folder and create following class.
ImageGridActivity, ImageAdapter and FullImageActivity
Now put the following code in ImageGridActivity
public class ImageGridActivity 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));
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View arg1, int position,
long arg3) {
// TODO Auto-generated method stub
// Sending image id to FullScreenActivity
Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
// passing array index
i.putExtra("id", position);
startActivity(i);
}
});
Same way Now put Following code inside ImageAdapter class
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_12,R.drawable.pic_14
};
// Constructor
public ImageAdapter(Context c){
mContext = c;
}
public int getCount() {
// TODO Auto-generated method stub
return mThumbIds.length;
}
public Object getItem(int position) {
// TODO Auto-generated method stub
return mThumbIds[position];
}
public long getItemId(int arg0) {
// TODO Auto-generated method stub
return 0;
}
public View getView(int position, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
return imageView;
}
}
Finally in FullImageActivity class put the following code. 
public class FullImageActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.full_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]);
}
}
4 Now Final Step Android Manifest.xml File
Finally your Android Manifestfile looks like following way..
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.sks.kindle"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="15" />
<application
android:icon="@drawable/android"
android:label="@string/app_name" >
<activity
android:name=".ImageGridActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- FullImageActivity -->
<activity android:name=".FullImageActivity"></activity>
</application>
</manifest>
Now You have done all coding part now run your project and Get your Grid View.
Note Put all 11  png image  in Drawable folder named like pic_1.png, 

Comments

Popular posts from this blog

ViewPager for Horizental Screen Slides

Hello Guys!!! Hope you all doing well...
Swipe left or right to see an entirely new screen Image  or Pages in Android is done by using support library android-support-v4.jar.  A ViewPager provided by the this  support library. ViewPagers can animate screen slides automatically . Here I am going to show an example of ViewPager to swipe image left or right with page count. I am also putting Timer method in it for automatically sliding of images.

Here is necessary java classes and xml file . You can also downloadsource code from Github.
1. MainActivity.java
2. ViewPagerAdapter.java
3. activity_main.xml
4. pages.xml
5. Put image you want for swiping in drwable folder inside res folder

1. MainActivity.java is the class in wich you can set your ViewPager adapter for image sliding. Please read the comment inside code for better understanding of flow .
package com.sks.androidviewpager;import java.util.Timer;import java.util.TimerTask;import com.androidsurya.androidviewpager.R;import android.a…

Set Live Frame on Camera Capturing Image in Android

Hi Guys,
Hope All of You Doing Well.
Here I am going to show you how to put live Photo Frame on Android Camera. Sometime you need to put a fabulous Photo frame during your image captures. It is more interesting to put a Frame during image capture than after image captures. Live frame putting give you a edge over static frame putting because it provide easily adjustment of your image captures.
Here is the code
Create a Android Activity and put it name CameraOverview1 . Copy and paste following code in this class.
publicclassCameraOverview1extendsActivityimplementsSurfaceHolder.Callback{privateCamera camera =null;privateSurfaceView cameraSurfaceView =null;privateSurfaceHolder cameraSurfaceHolder =null;privateboolean previewing =false;privateDisplay display

Importance of AndroidManifest.xml file in Android Application Code

Hello Guys! Hope You All are doing well. Today i am going to shows the importance of manifest file in Android App Development. Generally beginner of Android App developer  forget to pay much attention of AndroidManifest.xml in Android App development. The importance of Manifest file in Android App Development is huge. So today  I am going to put some light on it. 
The manifest file is the foundation for any Android application. Every application must have an AndroidManifest.xml(exact like here given name) file in its root directory. The manifest presents essential information about the application to the Android system, information the system must have before it can run any of the application's code. The manifest file organizes an Android application into a well-defined structure that is shared by all applications and enables the Android operating system to load and execute them in a managed environment. The manifest file does the following things:- It names the Java package for …