Android Custom Gallery Example

Create your own gallery within android application.The following code will fetch the images from your SD card and display them in a grid view as thumbnails .On clicking on the thumbnail the image will be displayed in a new screen maximized.You can build on this code as per your requirement.

Now lets start by creating a simple project.


1.Create an android application project
2.Create a class file name 'MainActivity.java' (would be done when the poject is created)

MainActivity.java

public class MainActivity extends Activity {
 private int count;
 private Bitmap[] thumbnails;
 private String[] arrPath;
 private ImageAdapter imageAdapter;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  final String[] columns = { MediaStore.Images.Media.DATA,
    MediaStore.Images.Media._ID };
  final String orderBy = MediaStore.Images.Media._ID;
  Cursor imagecursor = managedQuery(
    MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, null,
    null, orderBy);
  int image_column_index = imagecursor
    .getColumnIndex(MediaStore.Images.Media._ID);
  this.count = imagecursor.getCount();
  this.thumbnails = new Bitmap[this.count];
  this.arrPath = new String[this.count];
  for (int i = 0; i < this.count; i++) {
   imagecursor.moveToPosition(i);
   int id = imagecursor.getInt(image_column_index);
   int dataColumnIndex = imagecursor
     .getColumnIndex(MediaStore.Images.Media.DATA);
   thumbnails[i] = MediaStore.Images.Thumbnails.getThumbnail(
     getApplicationContext().getContentResolver(), id,
     MediaStore.Images.Thumbnails.MICRO_KIND, null);
   arrPath[i] = imagecursor.getString(dataColumnIndex);
  }
  GridView imagegrid = (GridView) findViewById(R.id.PhoneImageGrid);

  imageAdapter = new ImageAdapter();
  imagegrid.setAdapter(imageAdapter);
  imagecursor.close();
 }

 public class ImageAdapter extends BaseAdapter {
  private LayoutInflater mInflater;

  public ImageAdapter() {
   mInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  }

  public int getCount() {
   return count;
  }

  public Object getItem(int position) {
   return position;
  }

  public long getItemId(int position) {
   return position;
  }

  public View getView(int position, View convertView, ViewGroup parent) {
   ViewHolder holder;
   if (convertView == null) {
    holder = new ViewHolder();
    convertView = mInflater.inflate(R.layout.galleryitem, null);
    holder.imageview = (ImageView) convertView
      .findViewById(R.id.thumbImage);

    convertView.setTag(holder);
   } else {
    holder = (ViewHolder) convertView.getTag();
   }
   holder.imageview.setId(position);

   holder.imageview.setOnClickListener(new OnClickListener() {

    public void onClick(View v) {
     // TODO Auto-generated method stub
     int id = v.getId();
     Intent intent = new Intent(MainActivity.this,
       lastscreen.class);
     intent.setDataAndType(Uri.parse("file://" + arrPath[id]),
       "image/*");
     intent.putExtra("path", arrPath[id]);
     startActivity(intent);
    }
   });
   holder.imageview.setImageBitmap(thumbnails[position]);
   return convertView;
  }
 }

 class ViewHolder {
  ImageView imageview;
 }
}



3.Now design the UI for your gallery with the 'activity_main.xml',and 'galleryitem.xml' files.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridView
        android:id="@+id/PhoneImageGrid"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="90dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp" />

</RelativeLayout>


galleryitem.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
4.Now add a new activity to your application with 'lastscreen.java' and 'lastscreen.xml' to display the image maximized on clicking the thumbnail.

lastscreen.java

 
public class lastscreen extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.lastscreen);
  Intent in = getIntent();
  String path = in.getStringExtra("path");
  ImageView i = (ImageView) findViewById(R.id.imageView1);
  Bitmap new_image = BitmapFactory.decodeFile(path);
  i.setImageBitmap(new_image);
 }

}
lastscreen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.72"
android:src="@drawable/ic_launcher"
android:scaleType="fitXY" />

</LinearLayout>

Now run the project to get a similar output(If running in emulato please check that there are images loaded in sd)
Please remove code that closes cursor in Android 4.0 and higher.










Labels: , , ,