Custom Gallery View

Custom View for Gallery Demo in Android.

 

Declare following variables.

  

private ImageView selectedImageView;
private ImageView leftArrowImageView;
private ImageView rightArrowImageView;
private Gallery gallery;
private int selectedImagePosition = 0;
private List<Drawable> drawables;
private GalleryImageAdapter galImageAdapter;

 

Screen-Snap 

private void setupUI() {



selectedImageView = (ImageView) findViewById(R.id.selected_imageview);
  leftArrowImageView = (ImageView) findViewById(R.id.left_arrow_imageview);
  rightArrowImageView = (ImageView) findViewById(R.id.right_arrow_imageview);
  gallery = (Gallery) findViewById(R.id.gallery);

  leftArrowImageView.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {

    if (selectedImagePosition > 0) {
     --selectedImagePosition;

    }

    gallery.setSelection(selectedImagePosition, false);
   }
  });

  rightArrowImageView.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {

    if (selectedImagePosition < drawables.size() - 1) {
     ++selectedImagePosition;

    }

    gallery.setSelection(selectedImagePosition, false);

   }
  });

This Function used for Gallary Images selection purpose, and to swap left and right you also use arrow buttons which works with this function.

gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

   @Override
   public void onItemSelected(AdapterView parent, View view, int pos, long id) {

    selectedImagePosition = pos;

    if (selectedImagePosition > 0 && selectedImagePosition < drawables.size() - 1) {

     leftArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_left_enabled));
     rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_enabled));

    } else if (selectedImagePosition == 0) {

     leftArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_left_disabled));

    } else if (selectedImagePosition == drawables.size() - 1) {

     rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_disabled));
    }

    changeBorderForSelectedImage(selectedImagePosition);
    setSelectedImage(selectedImagePosition);
   }

   @Override
   public void onNothingSelected(AdapterView arg0) {

   }

  });

Gallary clickListener set for that selection.

galImageAdapter = new GalleryImageAdapter(this, drawables);

  gallery.setAdapter(galImageAdapter);

  if (drawables.size() > 0) {

   gallery.setSelection(selectedImagePosition, false);

  }

  if (drawables.size() == 1) {

   rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_disabled));
  }

Instantiate the Adapter and check condition for length of Images available.

 

private void changeBorderForSelectedImage(int selectedItemPos) {

  int count = gallery.getChildCount();

  for (int i = 0; i < count; i++) {

   ImageView imageView = (ImageView) gallery.getChildAt(i);
   imageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.image_border));
   imageView.setPadding(3, 3, 3, 3);

  }

  ImageView imageView = (ImageView) gallery.getSelectedView();
  imageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.selected_image_border));
  imageView.setPadding(3, 3, 3, 3);
 }

For selection Image border set because its view as it is selected. 

 

private void getDrawablesList() {

  drawables = new ArrayList();
  drawables.add(getResources().getDrawable(R.drawable.natureimage1));
  drawables.add(getResources().getDrawable(R.drawable.natureimage2));
  drawables.add(getResources().getDrawable(R.drawable.natureimage3));
  drawables.add(getResources().getDrawable(R.drawable.natureimage4));
  drawables.add(getResources().getDrawable(R.drawable.natureimage5));
  drawables.add(getResources().getDrawable(R.drawable.natureimage6));
  drawables.add(getResources().getDrawable(R.drawable.natureimage7));
  drawables.add(getResources().getDrawable(R.drawable.natureimage8));
  drawables.add(getResources().getDrawable(R.drawable.natureimage9));
  drawables.add(getResources().getDrawable(R.drawable.natureimage10));
  drawables.add(getResources().getDrawable(R.drawable.natureimage11));
  drawables.add(getResources().getDrawable(R.drawable.natureimage12));
  drawables.add(getResources().getDrawable(R.drawable.natureimage13));
  drawables.add(getResources().getDrawable(R.drawable.natureimage14));
  drawables.add(getResources().getDrawable(R.drawable.natureimage15));

 }

This function used to set Images in Gallary. 

 

private void setSelectedImage(int selectedImagePosition) {

  BitmapDrawable bd = (BitmapDrawable) drawables.get(selectedImagePosition);
  Bitmap b = Bitmap.createScaledBitmap(bd.getBitmap(), (int) (bd.getIntrinsicHeight() * 0.9), (int) (bd.getIntrinsicWidth() * 0.7), false);
  selectedImageView.setImageBitmap(b);
  selectedImageView.setScaleType(ScaleType.FIT_XY);

 }

Used for Image Selection.  

Following Class extends BaseAdapter and it is for set Images to the GallaryView.

 

 GalleryImageAdapter.java 

package com.sandy.gallerydemo;

import java.util.List;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class GalleryImageAdapter extends BaseAdapter {

 private Activity context;

 private static ImageView imageView;

 private List plotsImages;

 private static ViewHolder holder;

 public GalleryImageAdapter(Activity context, List plotsImages) {

  this.context = context;
  this.plotsImages = plotsImages;

 }

 @Override
 public int getCount() {
  return plotsImages.size();
 }

 @Override
 public Object getItem(int position) {
  return null;
 }

 @Override
 public long getItemId(int position) {
  return 0;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {

  if (convertView == null) {

   holder = new ViewHolder();

   imageView = new ImageView(this.context);

   imageView.setPadding(3, 3, 3, 3);

   convertView = imageView;

   holder.imageView = imageView;

   convertView.setTag(holder);

  } else {

   holder = (ViewHolder) convertView.getTag();
  }

  holder.imageView.setImageDrawable(plotsImages.get(position));

  holder.imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  holder.imageView.setLayoutParams(new Gallery.LayoutParams(150, 90));

  return imageView;
 }

 private static class ViewHolder {
  ImageView imageView;
 }
}

For UI Design create .xml file from following reference.

 

main.xml 

For Source Code click here to Download.