Image SlideShow using ViewFlipper in Android

August 17, 2012
By

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”

New Android Application Project

Figure 1 : New Android Application Project


2. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


3. Create a blank activity

Create a blank Activity

Figure 3 : Create a blank Activity


4. Enter MainActivity Details

Enter Main Activity 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


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

Image Slideshow using ViewFlipper

Figure 5 : Image Slideshow using ViewFlipper


13. Download


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: , , , , ,

6 Responses to Image SlideShow using ViewFlipper in Android

  1. sumaya on September 3, 2012 at 7:23 pm

    is it possible to create the first page with logo just for some second

  2. Ivan on April 29, 2013 at 2:32 pm

    Awesome tutorial one more time,
    is it possible to do the transition from right to left?
    thanks

  3. Ivan on April 29, 2013 at 5:03 pm

    Is it possible to take the position of each image with an ItemOnClick or something like that??
    Thanks

  4. Prasad VDV on October 17, 2014 at 4:57 pm

    how to use view flipper for dynamic images (i.e., url images ). Please help me could solve my issue

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