Basically GridView is a
ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.GridView Control or layout is one of the most useful layouts in android. Gridview is mainly useful when we want to 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.
In This Tutorial I will showing you how Images are binded in GridView .
When You Click or Tap on an image the Image will Open in activity with Full Sizes.
Now Lets Start.
Follow the Following Steps.
1) Craete a New Project in android with Acticity Name "ImageGridViewVisualStudioLearnActivity"
2) Now paste your images in res /drawable-hdpi folder.
3) in Main.xml Paste the Following Code
<?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) Add a new Class in src / package folder name your class as ImageAdapter.java
5) Extend your ImageAdapter.java class from BaseAdapter
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.p1, R.drawable.p2,
R.drawable.p3, R.drawable.p4,
R.drawable.p5, R.drawable.p6,
R.drawable.p7, R.drawable.p8,
R.drawable.p9, R.drawable.p10,
R.drawable.p11, R.drawable.p12,
R.drawable.p13, R.drawable.p14,
R.drawable.p15
};
// 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) Now Open Main Activity and Write The Following Code
package sajjadAshraFpackage.namespace;
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 ImageGridViewVisualStudioLearnActivity extends Activity {
private static final int FindViewById = 0;
/** Called when the activity is first created. */
GridView gridview;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
gridview =(GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
//When You Click Image It Show Full Size Image in New Activity
gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v,
int position, long id) {
// Sending image id to FullScreenActivity
Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
// passing array index
i.putExtra("id", position);
startActivity(i);
}
});
}
}
Showing selected grid image in new Activity (Full Screen)
7.Create new XML file under layout folder and name it as full_image.xml and fill it with the following code.
<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>
8) Crete a new Activity by right clicking on (Right Click) src /package folder then New and Then Class and name your class as FullImageActivity.java andtype following code.
package com.example.androidhive;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class FullImageActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
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]);
}
}
Now Open AndroidManifest.xml and add entries of newly added activity.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.androidhive"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="8" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:label="@string/app_name"
android:name=".AndroidGridLayoutActivity" >
<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>
DOWNLOAD SOURCE CODE (RECOMMENDED)
OR
Source Code For Download
OUT PUT Screen Shorts
After Clicking On Image:-
0 comments:
Post a Comment