Image Slideshow from Right to Left using ViewFlipper in Android

April 30, 2013
By

In this article, we will develop an Android application which shows a set of images as slide show where images are slide in from right side and slide out to left side.



Left to right image slide show is discussed in the article titled “Image SlideShow using ViewFlipper in Android

This application is developed using Eclipse IDE ( 4.2.1 ) with ADT plugin ( 21.1.0 ) and Android SDK ( R21.1.0 ) .



1. Create a new Android application project namely “ViewFlipperRTL”

New Android Application project "ViewFlipperRTL"

Figure 1 : New Android Application project "ViewFlipperRTL"


2. Configure the application project

Configure the application project

Figure 2 : Configure the application project


3. Design application launcher icon

Design application launcher icon

Figure 3 : Design application launcher icon


4. Create a blank activity

Create a blank activity

Figure 4 : Create a blank activity


5. Enter MainActivity Details

Enter MainActivity details

Figure 5 : Enter MainActivity details


6. Create new folder res/drawable and download the given below file and extract it to the folder res/drawable folder


7. Update the file res/values/strings.xml


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

    <string name="app_name">ViewFlipper Demo</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

    <string name="str_img1">Image1</string>
    <string name="str_img2">Image2</string>
    <string name="str_img3">Image3</string>
    <string name="str_img4">Image4</string>
    <string name="str_img5">Image5</string>

    <string name="str_btn_start">Start SlideShow</string>
    <string name="str_btn_stop">Stop SlideShow</string>

</resources>


8. Create a file 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>


9. Create a file res/anim/slide_out_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>


10. Update the layout file res/layout/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" >

    <Button
        android:id="@+id/btn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/str_btn_start" />

    <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_out_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>


11. Update the class MainActivity in the file src/in/wptrafficanalyzer/viewflipperrtl/MainActivity.java


package in.wptrafficanalyzer.viewflipperrtl;

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.activity_main);

        /** Click event handler for button */
        OnClickListener listener = new OnClickListener() {

            @Override
            public void onClick(View v) {
                ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper1);

                if(mFlipping==0){
                    /** Start Flipping */
                    flipper.startFlipping();
                    mFlipping=1;
                    mButton.setText(R.string.str_btn_stop);
                }
                else{
                    /** Stop Flipping */
                    flipper.stopFlipping();
                    mFlipping=0;
                    mButton.setText(R.string.str_btn_start);
                }
            }
        };
        /** Getting a reference to the button available in the resource */
        mButton = (Button) findViewById(R.id.btn);

        /** Setting click event listner for the button */
        mButton.setOnClickListener(listener);

    }

    @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;
    }

}


12. Screenshot of the application in execution

Screenshot of the application in execution

Figure 6 : Screenshot of the application in execution


13. Download source code



How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , , , ,

8 Responses to Image Slideshow from Right to Left using ViewFlipper in Android

  1. Wyllyam on May 17, 2013 at 5:54 pm

    very good! keep writing more articles about android development

  2. malindu on July 17, 2013 at 5:00 pm

    This is good. How can do this using server side image

  3. sravanthi on November 20, 2013 at 4:18 pm

    this is really help me ,thank you

  4. Argha on February 20, 2014 at 4:18 pm

    I am a Android Developer. This code really helps me a lot. It is very easy to handle for static Image. Can u please help me out by codes of server side images.where I can add n number of images dynamically.Thanks.

  5. Jagdeesh on June 19, 2015 at 3:20 am

    hi im developing an app where clicking on a image,it should go to the desired activity . i used viewflipper to slideshow the images and it works.When i click on a image it goes into that page but when i return back to that same activity the slideshow is not working.it remains in the same image that i have clicked.(but incase if i have not clicked it and went inside other activities and come back its playing . it stops at that image only if i click that imageview.). how to continue slideshow

  6. Amit on August 8, 2015 at 8:48 pm

    Hi George, I am new to Android development. I need vertical continuous image thumb scroller, can you help me to create one demo..

  7. gaurav meghanathi on October 28, 2015 at 11:23 am

    hi George i wan to slide my image when i am display images through sending intent and next activity to display then sliding that image to display(second activity) through left to right visa versa change images by id

  8. vikram on October 29, 2015 at 10:23 am

    it good but please help me to dynamically images

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner