Search This Blog

Support my cause by downloading

Saturday, 7 April 2012

How to create a simple android Gallery View

Android provide a way to show photo (either from sdcards or on-line) in a specified manner. You can navigate and see all photo. We do with help of android widget Gallery. Gallery is just like List View in which we bind the data using Base Adapter . If want some depth knowledge about how to bind data using adapter then see ListView with Image and Text Article.
Gallery is deprecated from Jelly bean. And they suggest to use  horizontally scrolling widgets include Horizontal Scroll-view and View Pager from the support library.Wait soon i will post about this also. But for now we can use Gallery.

Step1) First create a new project

Step2 change your main.xml to as follows

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

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" android:padding="5dp">

       <Gallery

android:id="@+id/Gallery01"

android:layout_width="fill_parent"

android:layout_height="90dp"></Gallery>

        <LinearLayout

android:id="@+id/ImageView01"

android:layout_width="fill_parent"

android:layout_height="fill_parent"></LinearLayout>

</LinearLayout>


Step3 change your main activity to as follows- 


package com.ahmad.samples.views;


import android.app.Activity;

import android.content.Context;

import android.content.res.TypedArray;

import android.os.Bundle;

import android.view.Gravity;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.Toast;


public class GalleryViewAhmad extends Activity {

        //These image should be store in your drawble folder under res.

Integer[] pics = { R.drawable.antartica1, R.drawable.antartica2,

R.drawable.antartica3, R.drawable.antartica4,

R.drawable.antartica5, R.drawable.antartica6,

R.drawable.antartica7, R.drawable.antartica8,

R.drawable.antartica9, R.drawable.antartica10 ,

R.drawable.antartica3, R.drawable.antartica4,

R.drawable.antartica5, R.drawable.antartica6,

R.drawable.antartica7, R.drawable.antartica8,

R.drawable.antartica9, R.drawable.antartica10 };

LinearLayout imageView;


/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

try {

// InputStream in = (new URL("www.google.com").openStream());

} catch (Exception e) {

e.getMessage();

}

Gallery ga = (Gallery) findViewById(R.id.Gallery01);

ga.setAdapter(new ImageAdapter(this));


imageView = (LinearLayout) findViewById(R.id.ImageView01);

ga.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

long arg3) {

Toast.makeText(

getBaseContext(),

"You have selected picture " + (arg2 + 1)

+ " of Antartica", Toast.LENGTH_SHORT).show();

try {

imageView.removeAllViews();

} catch (Exception e) {

e.getMessage();

}

TouchImageView touchImageView = new TouchImageView(

GalleryView.this);

touchImageView.setImageResource(pics[arg2]);

LayoutParams lp=new LayoutParams(LayoutParams.FILL_PARENT,     LayoutParams.FILL_PARENT);

imageView.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);

touchImageView.setLayoutParams(lp);

imageView.addView(touchImageView);

}


});

}

This is Base-Adapter class to bind view with Gallery-View


public class ImageAdapter extends BaseAdapter {

private Context ctx;

int imageBackground;

public ImageAdapter(Context c) {

ctx = c;

TypedArray ta = obtainStyledAttributes(R.styleable.Gallery1);

imageBackground = ta.getResourceId(

R.styleable.Gallery1_android_galleryItemBackground, 1);

ta.recycle();

}

@Override

public int getCount() {

return pics.length;

}

@Override

public Object getItem(int arg0) {

return arg0;

}

@Override

public long getItemId(int arg0) {

return arg0;

}

@Override

public View getView(int arg0, View arg1, ViewGroup arg2) {

ImageView iv = new ImageView(ctx);

iv.setImageResource(pics[arg0]);

iv.setScaleType(ImageView.ScaleType.FIT_XY);

iv.setLayoutParams(new Gallery.LayoutParams(150, 120));

iv.setBackgroundResource(imageBackground);

return iv;

}

}

}




Now enjoy by running it.You can                download complete project

Android News and source code