Image SlideShow using ViewFlipper in Android

In this article we will create an Android application which slides a fixed set of images using ViewFlipper. The application facilitates users to Start or Stop slideshow using a button click.

On clicking the “Start Slideshow” button, the images will be started to slide from left to right automatically.

Please refer the article titled “Image Slideshow from Right to Left using ViewFlipper in Android“, where the images are sliding from right to left.

This application is developed using Eclipse IDE ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 ) .

1. Create new Android application project namely “ViewFlipperDemo”

Figure 1 : New Android Application Project

2. Design application launcher icon

Figure 2 : Design Application Launcher Icon

3. Create a blank activity

Figure 3 : Create a blank Activity

4. Enter MainActivity Details

Figure 4 : Enter Main Activity Details

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

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

<resources>

    <string name="app_name">ViewFlipperDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">ViewFlipper Demo</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>

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

<resources>
 <style name="AppTheme" parent="android:Theme" />
</resources>

8. Update the file res/values-v11/styles.xml

<resources>
    <style name="AppTheme" parent="android:Theme.Holo" />
</resources>

9. Update the file res/values-v14/styles.xml

<resources>
    <style name="AppTheme" parent="android:Theme.Holo" />
</resources>

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="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right"
        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/viewflipperdemo/MainActivity.java

package in.wptrafficanalyzer.viewflipperdemo;

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
    public 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) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
  }
}

12. Screenshot of the application in execution

Figure 5 : Image Slideshow using ViewFlipper

13. Download

Image SlideShow using ViewFlipper in Android 869.07 KB

Download Full Source Code

14. Reference

http://developer.android.com/guide/index.html

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, button, image, ImageVIew, slideshow, ViewFlipper