Gallery Viewer

This is Android Code which I designed recently. Using Gallery View in android we can able to view photos and here is what I done. I developed this using Android 2.2 with eclipse Helios. 

Step 1: Designing XML

I am using a legacy linear layout which contains gallery to load images and image view to view images.

This is how main.xml looks:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical">
    <Gallery xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/examplegallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <ImageView android:id="@+id/ImageView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Step 2: Adding Gallery Theme

Add the following xml in your application in /res/values/ folder and name as attributes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="GalleryTheme">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

Step 3: Adding Images

Add Your Desired Images In /res/drawable folder which contains drawable-hdpi, drawable-mdpi and drawable-ldpi folders refer http://developer.android.com/guide/practices/ui_guidelines/icon_design.html for desinging the icons.

Step 4: The Final Code

Create Objects for Image View and Gallery

protected Gallery gallery;
protected ImageView imgView;

Create Image Array and Context

protected Context con=this;
    public Integer[] imageId={R.drawable.icon,R.drawable.sample_0,
            R.drawable.sample_1,R.drawable.sample_2,
            R.drawable.sample_3,R.drawable.sample_4,
            R.drawable.sample_5,R.drawable.sample_6,
            R.drawable.sample_7};

in Oncreate method of activity class initialize the view for galley and image view and set the source drivers (Adapters) for gallery and invoke the Onclick listener for the items in gallery 

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        gallery=(Gallery) findViewById(R.id.examplegallery);
        imgView=(ImageView) findViewById(R.id.ImageView01);
        gallery.setAdapter(new ImageAdapter(con));
        gallery.setOnItemClickListener(listener);
    }

Create a new class ImageAdpater for setting Image view which extends the BaseAdapter

public class ImageAdapter extends BaseAdapter {

        int galleryBackGround;
       
        public ImageAdapter(Context c) {
            con=c;
            TypedArray tArray=obtainStyledAttributes(R.styleable.GalleryTheme);
            galleryBackGround=tArray.getResourceId(R.styleable.GalleryTheme_android_galleryItemBackground,0);
            tArray.recycle();
        }
       
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return imageId.length;
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            ImageView iv=new ImageView(con);
            iv.setImageResource(imageId[position]);
            iv.setLayoutParams(new Gallery.LayoutParams(77, 77));
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setBackgroundResource(galleryBackGround);
           
            return iv;
        }
       
    }

Then finally to view Image implement the OnItemClickListener as follows:

protected OnItemClickListener listener=new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View v, int position,
                long id) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "You selected picture "+position, Toast.LENGTH_LONG).show();
            imgView.setScaleType(ImageView.ScaleType.FIT_XY);
            Log.d("Left padding ", ""+imgView.getPaddingLeft());
            Log.d("right padding ", ""+imgView.getPaddingRight());
            Log.d("top padding ", ""+imgView.getPaddingTop());
            Log.d("bottom padding ", ""+imgView.getPaddingBottom());
            imgView.setImageResource(imageId[position]);
            imgView.setPadding(30, 10, 30, 10);
        }
    };