Image Slideshow from Right to Left using ViewFlipper in Android

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”

Figure 1 : New Android Application project "ViewFlipperRTL"

2. Configure the application project

Figure 2 : Configure the application project

3. Design application launcher icon

Figure 3 : Design application launcher icon

4. Create a blank activity

Figure 4 : Create a blank activity

5. 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

View Flipper Images 60.77 KB

Download Images

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

Figure 6 : Screenshot of the application in execution

13. Download source code

ViewFlipper with right to left animation for image slideshow in Android 432.48 KB

Download Full 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: activity, animation, button, image, ImageVIew, slideshow, ViewFlipper