Basic GridView Layout
- Create a new project by going to File ⇒ New Android Project and fill required details. (I named my main activity as MainActivity.java)
- Prepare your images which you want to show in grid layout and place them in res ⇒ drawable-hdpi folder.
- Create a new XML layout under layout and name it as grid_layout.xml (Right Click) layout ⇒ New ⇒ Android XML File
- Create a new Class by right clicking on (Right Click) src ⇒ package folder ⇒ New ⇒ Class and name your class as ImageAdapter.java
- Extend your ImageAdapter.java class from BaseAdapter and fill it with following code.
- Open your main activity class as shown in AndroidGridLayoutActivity.java
- Run your project
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>
|
ImageAdapter.java
package com.androiduidesign.gridviewexample;
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.image_1, R.drawable.image_2,
R.drawable.image_3, R.drawable.image_4,
R.drawable.image_5, R.drawable.image_6,
R.drawable.image_7, R.drawable.image_8,
R.drawable.image_9, R.drawable.image_10,
R.drawable.image_11, R.drawable.image_12,
R.drawable.image_13, R.drawable.image_14,
R.drawable.image_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;
}
}
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.image_1, R.drawable.image_2,
R.drawable.image_3, R.drawable.image_4,
R.drawable.image_5, R.drawable.image_6,
R.drawable.image_7, R.drawable.image_8,
R.drawable.image_9, R.drawable.image_10,
R.drawable.image_11, R.drawable.image_12,
R.drawable.image_13, R.drawable.image_14,
R.drawable.image_15
};
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;
}
}
Main
Activity.java
package com.androiduidesign.gridviewexample;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.AdapterView.OnItemClickListener;
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridView = (GridView) findViewById(R.id.grid_view);
// Instance of ImageAdapter Class
gridView.setAdapter(new ImageAdapter(this));
}
}
import android.widget.AdapterView.OnItemClickListener;
Until now we displayed all images in simple grid layout. To this we can add functionality like showing selected image in fullscreen. For this we need to pass image resource id from grid view to new activity.
- Create new XML file under layout folder and name it as image.xml and fill it following code.
- Create a new Activity by right clicking on (Right Click) src ⇒ package folder ⇒ New ⇒ Class and name your class as ImageActivity.java and type following code.
- Modify your main activity class MainActivity.java. Added click event for grid element.
- Finally run your project
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/image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ImageActivity.java
package com.androiduidesign.gridviewexample;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class ImageActivity 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.image_view);
imageView.setImageResource(imageAdapter.mThumbIds[position]);
}
}
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class ImageActivity 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.image_view);
imageView.setImageResource(imageAdapter.mThumbIds[position]);
}
}
0 reacties:
Een reactie posten