Monday, 10 March 2014

How to Create ImageGallery and Implement in Android Apps

In this blog explain that how to create imageGallery and view gallery image individually in separate frame.


main.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gallery View"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:textColor="#339966"
        android:textSize="20sp"
        android:textStyle="bold"/>



    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
      
         />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="320dp"
        android:layout_height="250dp"
        android:scaleType="fitXY"
         />

</LinearLayout>

GalleryViewActivity.java




package com.rakeshtiwari.galleryview;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;

public class GalleryViewActivity extends Activity {
// Image to display

Integer[] imageIDs={
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,


};

// R.drawable.pic5,
// R.drawable.pic6,
// R.drawable.pic7,
// R.drawable.pic8,
// R.drawable.pic9,
// R.drawable.pic10
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
        Gallery gallery=(Gallery)findViewById(R.id.gallery1);

        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View v, int position , long id) {
// TODO Auto-generated method stub
Toast.makeText(getBaseContext(), "pic"+(position+1)+"selected", Toast.LENGTH_LONG).show();

// Display the images selected............

ImageView imageView=(ImageView)findViewById(R.id.imageView1);
imageView.setImageResource(imageIDs[position]);
}
});

}
public class ImageAdapter extends BaseAdapter{
Context context;
int itemBackground;

public ImageAdapter(Context c){
context=c;
// setting the style...........
TypedArray a=obtainStyledAttributes(R.styleable.Gallery1);
    itemBackground=a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground,0);
    a.recycle();
}
//  returns the number of images........
@Override
public int getCount() {
// TODO Auto-generated method stub
return imageIDs.length;
}

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

// Returns the ID of an item............
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

// Returns an ImageView view............

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ImageView imageView;
if(convertView==null){

imageView=new ImageView(context);
imageView.setImageResource(imageIDs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150,120));
}
else{
imageView=(ImageView)convertView;
}
imageView.setBackgroundResource(itemBackground);
return imageView;
}


}



}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rakeshtiwari.galleryview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/pic4"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:screenOrientation="portrait"
            android:name="com.rakeshtiwari.galleryview.GalleryViewActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


ImageGallery View Functionality

Independent ImageGallery View

Independent Image GalleryView

Image GalleryView Functionality

ImageView Functionality