Tutorials Android Android ViewFlipper Example- Creating Image Slideshow Using ViewFlipper

Android ViewFlipper Example- Creating Image Slideshow Using ViewFlipper

1. Introduction to Android ViewFlipper

ViewFlipper is and user interface widget available in android since android API level 1. It can hold two more views, but only one child can be shown at a time. Using this we can implement functionality similar to android gallery item, swiping allows to navigate between images. It also support to auto flip between child at a regular interval.

The ViewFlipper class has derived from ViewAnimator. It supports the methods to set the animation for the in and out actions using setInAnimation() and setOutAnimation(). You can either use some of the default animation that are available in android system or you can write your own animation class.

2. Defining ViewFlipper Example 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/view_flipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/lightning" />

            <TextView
                style="@style/ImageTitle"
                android:text="@string/lightning" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/color_baloons" />

            <TextView
                style="@style/ImageTitle"
                android:text="@string/color_baloons" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/natural_wall" />

            <TextView
                style="@style/ImageTitle"
                android:text="@string/natural_wall" />
        </RelativeLayout>
    </ViewFlipper>

    <ImageView
        android:id="@+id/swipe_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swipe_left" />

    <ImageView
        android:id="@+id/swipe_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swipe_right" />

</RelativeLayout>

Here in the above xml layout, I am using three LinearLayout. Each layout has an image and image caption. All image caption is using the same style. You can see the screenshot’s below for the style. Now, let us create a style.xml file in values folder and then add the following style code

<?xml version="1.0" encoding="utf-8"?>
<resources>    
    <style name="ImageTitle">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:layout_alignParentBottom">true</item>
        <item name="android:background">#99000000</item>
        <item name="android:gravity">center</item>
        <item name="android:maxLines">2</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">18dp</item>
        <item name="android:typeface">sans</item>
    </style>
</resources>

I admit the fact that, the style file used here can be more improvised. The color can be placed in colors.xml file. But, for the sake of simplicity it is using the colors right inside the styles. Now we are done with the layout design and we will move to controlling the ViewFlipper from java code.

Android ViewFlipper example

3. Using ViewFlipper in Activity

Android ViewFlipper can anytime display only one immoderate child at a time. So you can only see the first image in your eclipse graphical layout view. We need to pragmatically move to different child or we can setup an auto timer. Setting an auto flip timer will create a slideshow and can be controlled by startFlipping() and stopFlipping() method. Later in this example we will see more in detail.

public class ViewFlipperSampleActivity extends Activity {
	private static final int SWIPE_MIN_DISTANCE = 120;
	private static final int SWIPE_THRESHOLD_VELOCITY = 200;
	private ViewFlipper mViewFlipper;	
	private Context mContext;
	private final GestureDetector detector = new GestureDetector(new SwipeGestureDetector());

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mContext = this;
		mViewFlipper = (ViewFlipper) this.findViewById(R.id.view_flipper);
		mViewFlipper.setOnTouchListener(new OnTouchListener() {
			@Override
			public boolean onTouch(final View view, final MotionEvent event) {
				detector.onTouchEvent(event);
				return true;
			}
		});
	}

	class SwipeGestureDetector extends SimpleOnGestureListener {
		@Override
		public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
			try {
				// right to left swipe
				if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
					mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.left_in));
					mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.left_out));					
					mViewFlipper.showNext();
					return true;
				} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
					mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.right_in));
					mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.right_out));
					mViewFlipper.showPrevious();
					return true;
				}

			} catch (Exception e) {
				e.printStackTrace();
			}

			return false;
		}
	}
}

In the above code, we are using GestureListener to identify the swipe gesture and rotate between ViewFlipper child view’s. showNext() and showPrevious() method’s are used to show the next and previous ViewFlipper child items. All the ViewFlipper items are added statically inside the layout xml file. However you can also add ViewFlipper child items using addView() method.

ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.color_baloons);
mViewFlipper.addView(imageView);

4. Image Slideshow in ViewFlipper

So far, our example is supporting swipe gesture. But what if we want to implement a slideshow?
Android ViewFlipper support auto flip which can be controlled with startFlipping() and stopFlipping() method. We can set the auto flip interval using setFlipInterval(period). Note that the interval period is in milliseconds.

To control the auto flip we will add play and stop buttons. I have inserted the following code right after ViewFlipper in my original layout xml file.

<LinearLayout
        style="@style/ButtonContainer"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:background="@android:drawable/ic_media_play" />

        <Button
            android:id="@+id/stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/ic_media_pause" />
    </LinearLayout>

Added the following style

<style name="ButtonContainer">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:layout_alignParentTop">true</item>
        <item name="android:background">#99000000</item>
        <item name="android:gravity">center</item>        
    </style>

ViewFlipper auto flip can be controlled from java code. add following code in your java class

		
findViewById(R.id.play).setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View view) {
		//sets auto flipping
		mViewFlipper.setAutoStart(true);
		mViewFlipper.setFlipInterval(4000);
		mViewFlipper.startFlipping();
	}
});

findViewById(R.id.stop).setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View view) {
		//stop auto flipping 
		mViewFlipper.stopFlipping();
	}
});

Android ViewFlipper example

5. ViewFlipper Animation and Events

The ViewFlipper class has derived from ViewAnimator. It supports the methods to set the animation for the in and out actions using setInAnimation() and setOutAnimation(). You can either use some of the default animation that are available in android system or you can write your own animation class.

Sometimes we may need to control our screen while animation is started or completed. AnimationListener enables to handle animation events using onAnimationStart(), onAnimationRepeat() and onAnimationEnd() methods.

//animation listener
AnimationListener mAnimationListener = new Animation.AnimationListener() {
	public void onAnimationStart(Animation animation) {
		//animation started event
	}

	public void onAnimationRepeat(Animation animation) {
	}

	public void onAnimationEnd(Animation animation) {
		//TODO animation stopped event
	}
};

Now add the animation listener to ViewFlipper.

mViewFlipper.getInAnimation().setAnimationListener(mAnimationListener);

6. Download source code

[download url=”https://github.com/javatechig/Android-UI-Tutorials/tree/master/ViewFlipperExample”]
Total
0
Shares
guest
19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
siddhu
siddhu
8 years ago

provide an image of o/p

Nilanchala Panigrahy
Nilanchala Panigrahy
8 years ago
Reply to  siddhu

Output image provided in the post.

Amo las maduras!
Amo las maduras!
8 years ago

interesting!

vignesh
vignesh
8 years ago

Pls tell if there is a way to display images from a JSON url by downloading it from server in to device memory.

Nadeem W. Khoury
Nadeem W. Khoury
8 years ago

Thank you very much. Wonderful example

javatechig
javatechig
8 years ago

Thanks Nadeem.

Adnan
Adnan
8 years ago
Reply to  javatechig

@javatechig:disqus : you have only 3 image in this app, but i am working on app, it contain 32 images and it perfectly working on 7 images but when i upload more than 7 images then it can’t working and showing error “Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE”, can you please provide the code for uploading images from “R.drawable” instead of XML?
Thanks

javatechig
javatechig
8 years ago
Reply to  Adnan

You must be careful of image size. However if you have a logic of downloading image from server. you may use open source lib “Universal Image Downloader”. It is an awesome lib for downloading and caching images and will be very much useful for you. Link below

https://github.com/nostra13/Android-Universal-Image-Loader

Adnan
Adnan
8 years ago
Reply to  javatechig

javatechig: you have only 3 image in this app, but i am working on app, it contain 32 images and it perfectly on 7 images but when i upload more than 7 images then it can’t working and showing error “Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE”, can you please provide by uploading images for “R.drawable” instead of XML?
Thanks

hotcaribbean
hotcaribbean
8 years ago

Nice tutorial. Can you help me getting this in a fragment activity. I can’t get it working

javatechig
javatechig
8 years ago
Reply to  hotcaribbean

Let me know the error you getting while running this example in FragmentActivity.

Adnan
Adnan
8 years ago

is there any right way to increase number of images ?

Mohanad M Inairat
Mohanad M Inairat
8 years ago

Nice example thanks a lot ,
but how i can add this example to fragment activity .??

Sheheryar
Sheheryar
7 years ago

android.view.InflateException: Binary XML file line #50: Error inflating class

Having problem in it

Yoda066
Yoda066
7 years ago

Hi.
First, thank you gor this great example.
Second, is it possible, to add scrolling functionality? Idea is to load image and scale it to fit width of my ImageView. Image then should be scrollable to the bottom.
I have tried to add this line to onFling listener:
scrollView.scrollTo(e2.getX(), e2.getY());
But It wasnt so smooth as default scrolling is.

Is there any help for me? Thanks,

ali
ali
7 years ago

really useful

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago

fixed.

Krishna Das
Krishna Das
6 years ago

How to get ViewFlippers content dynamically. Say if we have some textviews flipping. How to get the current textview contents so that we can share it to external applications?

gk
gk
6 years ago

just update the code … Gesture Detector is depreciated

Previous Post
Android Tutorials

ProgressBar while Loading WebView in Android

Next Post
Android Tutorials Javatechig

Websites Providing Attractive Android Tutorials for Developers

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
19
0
Would love your thoughts, please comment.x
()
x