image slideshow example in android?

I want to create image slideshow in android.

I have many images in android GridView now i want to open manual slideshow if any image is c开发者_高级运维licked so that i could view it by moving finger left or right next and previous images like android built in gallery.

any one guide me how to achieve this?

any help would be appreciated.

Try this code if you are using ViewFlipper to display images

slideShowBtn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                runnable = new Runnable() {

                    @Override
                    public void run() {
                        handler.postDelayed(runnable, 3000);
                        imageFrame.showNext();

                    }
                };
                handler.postDelayed(runnable, 500);
            }
        });

To stop it use handler.removeCallbacks(runnable);

public class PhotoSlideShowActivity extends Activity implements OnClickListener {

    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;
    private GestureDetector gestureDetector;
    View.OnTouchListener gestureListener;
    ViewFlipper imageFrame;
    RelativeLayout slideShowBtn;
    Handler handler;
    Runnable runnable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.photo_slideshow_main);
        imageFrame = (ViewFlipper) findViewById(R.id.imageFrames);

                //get sd card path for images

        File parentFolder = new
         File(Environment.getExternalStorageDirectory()
         .getAbsolutePath()
         + "/images");

        addFlipperImages(imageFrame, parentFolder);
        // Gesture detection
        gestureDetector = new GestureDetector(new MyGestureDetector());
        gestureListener = new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if (gestureDetector.onTouchEvent(event))
                    return true;
                else
                    return false;
            }
        };
        handler = new Handler();
        imageFrame.setOnClickListener(PhotoSlideShowActivity.this);
        imageFrame.setOnTouchListener(gestureListener);
        slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
        slideShowBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View arg0) {

                runnable = new Runnable() {

                    @Override
                    public void run() {
                        handler.postDelayed(runnable, 3000);
                        imageFrame.showNext();

                    }
                };
                handler.postDelayed(runnable, 500);
            }
        });

    }

    private void addFlipperImages(ViewFlipper flipper, File parent) {
        int imageCount = parent.listFiles().length;
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.FILL_PARENT,
                RelativeLayout.LayoutParams.FILL_PARENT);
        for (int count = 0; count < imageCount - 1; count++) {
            ImageView imageView = new ImageView(this);
            Bitmap imbm = BitmapFactory.decodeFile(parent.listFiles()[count]
                    .getAbsolutePath());
            imageView.setImageBitmap(imbm);
            imageView.setLayoutParams(params);
            flipper.addView(imageView);
        }

    }
    class MyGestureDetector extends SimpleOnGestureListener {
        @SuppressWarnings("static-access")
        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            // TODO Auto-generated method stub
            slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
            slideShowBtn.setVisibility(slideShowBtn.VISIBLE);
            handler.removeCallbacks(runnable);
            runnable = new Runnable() {

                @Override
                public void run() {
                    slideShowBtn.setVisibility(slideShowBtn.INVISIBLE);
                }
            };
            handler.postDelayed(runnable, 2000);
            return true;
        }
        @SuppressWarnings("static-access")
        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            // TODO Auto-generated method stub
            slideShowBtn = (RelativeLayout) findViewById(R.id.slideShowBtn);
            slideShowBtn.setVisibility(slideShowBtn.VISIBLE);
            handler.removeCallbacks(runnable);
            runnable = new Runnable() {

                @Override
                public void run() {
                    slideShowBtn.setVisibility(slideShowBtn.INVISIBLE);
                }
            };
            handler.postDelayed(runnable, 2000);
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            try {
                if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                    return false;
                // right to left swipe
                if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                    handler.removeCallbacks(runnable);
                    imageFrame.setInAnimation(inFromRightAnimation());
                    imageFrame.setOutAnimation(outToLeftAnimation());
                    imageFrame.showNext();
                } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                    handler.removeCallbacks(runnable);
                    imageFrame.setInAnimation(inFromLeftAnimation());
                    imageFrame.setOutAnimation(outToRightAnimation());
                    imageFrame.showPrevious();
                }
            } catch (Exception e) {
                // nothing
            }
            return false;
        }

    }

    @Override
    public void onClick(View view) {

    }

    private Animation inFromRightAnimation() {

        Animation inFromRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, +1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromRight.setDuration(500);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
    }
    private Animation outToLeftAnimation() {
        Animation outtoLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, -1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outtoLeft.setDuration(500);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
    }
    private Animation inFromLeftAnimation() {
        Animation inFromLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, -1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromLeft.setDuration(500);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
    }
    private Animation outToRightAnimation() {
        Animation outtoRight = new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, +1.2f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outtoRight.setDuration(500);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
    }

}

Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/imageFrames"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:drawable/screen_background_dark" >
    </ViewFlipper>

    <RelativeLayout
        android:id="@+id/slideShowBtn"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:gravity="center" android:visibility="invisible">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#33FFFFFF"
            android:gravity="center"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:paddingTop="1dp" >

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="#66000000"
                android:gravity="center" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:text="Slideshow"
                    android:textSize="18dp" />
            </RelativeLayout>
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

it is very easy to apply slide show using ViewFlipper in android.

put the images in drawable folder and follow below code.

slide_show.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/myflipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >
    </ViewFlipper>

</LinearLayout>

SlideShowActivity.java

package com.example.viewpagerexample;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class SlideShowActivity extends Activity {

    private ViewFlipper myViewFlipper;
    private float initialXPoint;
    int[] image = { R.drawable.one_full, R.drawable.two_full,
        R.drawable.three_full, R.drawable.four_full, R.drawable.five_full,
        R.drawable.six_full, R.drawable.seven_full, R.drawable.eight_full,
        R.drawable.nine_full, R.drawable.ten_full };

    @Override
    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.slide_show);
    myViewFlipper = (ViewFlipper) findViewById(R.id.myflipper);

    for (int i = 0; i < image.length; i++) {
        ImageView imageView = new ImageView(SlideShowActivity.this);
        imageView.setImageResource(image[i]);
        myViewFlipper.addView(imageView);
    }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        initialXPoint = event.getX();
        break;
    case MotionEvent.ACTION_UP:
        float finalx = event.getX();
        if (initialXPoint > finalx) {
            if (myViewFlipper.getDisplayedChild() == image.length)
                break;
            myViewFlipper.showNext();
        } else {
            if (myViewFlipper.getDisplayedChild() == 0)
                break;
            myViewFlipper.showPrevious();
        }
        break;
    }
    return false;
    }
}

Here the images are only changing while user is swipe.

If you want to swipe automatically with certain interval add the following code

myViewFlipper.setAutoStart(true);
myViewFlipper.setFlipInterval(3000);
myViewFlipper.startFlipping();

you can find example of Gallery1 and Gallery2 in ApiDemos:

c:\android-sdk-windows\samples\android-7\ApiDemos\src\com\example\android\apis\view\

Try these below full source Code:

MainActivity.java:

package com.example.splashanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

    int mFlipping = 0 ; // Initially flipping is off
    Button mButton ; // Reference to button available in the layout to start and stop the flipper

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activtiy_main);

        /** Click event handler for button */


                ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper1);


                    /** Start Flipping */
                    flipper.startFlipping();
                    mFlipping=1;

            }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}  

activity_main.xml:

<RelativeLayout 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" >



    <ViewFlipper
        android:id="@+id/flipper1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:flipInterval="3000"
        android:inAnimation="@anim/slide_in_right"
        android:outAnimation="@anim/slide_in_left"
        android:layout_centerInParent="true" >

        <ImageView
            android:src="@drawable/img1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img1"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img2"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img3"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/str_img4"
            android:layout_gravity="center_horizontal" />

        <ImageView
            android:src="@drawable/img5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/str_img5"
            android:layout_gravity="center_horizontal" />

    </ViewFlipper>

</RelativeLayout>

In res/anim/slide_in_left.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator" >
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="500"/>
</set>

In res/anim/slide_in_right.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="500"/>
</set>