App gallery in android

App gallery can be created using the below mentioned example.This code  displays  thumbnail images below a image view. Once click on these thumbnail images, the actual image will be displayed in the image view above.

I have used  ImageAdapter class that  extends BaseAdapter which sets the images in the gallery below and its corresponding preview in the image view ,according to the array passed to it.

You will also need to declare-styleable in the attributes.xml of res folder.This is used by ImageAdapater class.

A screenshot is also provided for your reference.

public class GalleryView extends Activity {
	//array of background images that appear in the gallery
    Integer[] pics = {
    		R.drawable.image01,
    		R.drawable.image02,
    		R.drawable.image03,
    		R.drawable.image04
    		    };
    ImageView imageView;
    private Context ctx;
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gallery);//set layout
    // Gallery  view  shows items in a center-locked, horizontally scrolling list.
   	Gallery ga = (Gallery)findViewById(R.id.Gallery01);
     ga.setAdapter(new ImageAdapter(this));//setting adapter for adding many images
  imageView = (ImageView)findViewById(R.id.ImageView01);//fetching image view by id
 //when clicking on gallery thumbnail the image is displayed in the image view
        ga.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
		imageView.setImageResource(pics[arg2]);//setting image from array passed
			}
        });
    }
    public class ImageAdapter extends BaseAdapter {
    	int imageBackground;
    	public ImageAdapter(Context c) {
			ctx = c;
	//TypedArray stores styled attributes
TypedArray ta = obtainStyledAttributes(R.styleable.Gallery1);
// Retrieve the resource identifier for the attribute at index
imageBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 1);
	//Give back a previously retrieved StyledAttributes, for later re-use.
			ta.recycle();
		}
		public int getCount() {
    		return pics.length;//no. of pics in gallery
    	}
    	public Object getItem(int arg0) {
    		return arg0;
    	}
    	public long getItemId(int arg0) {
    		return arg0;
    	}
	@Override
	//Get a View that displays the data at the specified position in the data set
    	public View getView(int arg0, View arg1, ViewGroup arg2) {
    		ImageView iv = new ImageView(ctx);
    		iv.setImageResource(pics[arg0]);//setting image thumbnail
// Controls how the image should be resized or moved to match the size of this
//ImageView.
iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
// Set the layout parameters associated with this view

iv.setLayoutParams(new Gallery.LayoutParams(150,120));
// Set the background to a given resource    		iv.setBackgroundResource(imageBackground);
    		return iv;
    	}
    }
    }

Attributes.xml in res folder

<?xml version="1.0" encoding="utf-8"?>

  <resources>
	<declare-styleable name="Gallery1">
		<attr name="android:galleryItemBackground"/>
	</declare-styleable>
</resources>  

gallery.xml in layout folder

Here we create a gallery type view which displays a horizontally scrollable gallery


<?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/ImageView01"
        android:layout_width="fill_parent"
        android:layout_height="2px"
        android:layout_margin="10dip"
        android:layout_weight="1"
        android:scaleType="centerInside" >
    </ImageView>

    <Gallery
        android:id="@+id/Gallery01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerInside" >
    </Gallery>

</LinearLayout>

Screenshot :

App gallery

Advertisements