Saturday, June 22, 2013

Android ViewFlipper Example

The Android Development Tutorials blog contains Basic as well as Advanced android tutorials.Go to Android Development Tutorials to get list of all Android Tutorials.


ViewFlipper

A ViewFlipper  is a simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

A ViewFlipper  can be used to slide views in and out of the user’s current view port .These Views slides with given appropriate Animation.

To learn Basic of Android Animation  go to  Android Animation Basics

In the below Snapshot you can see one Screen in Coming IN and other Screen is going OUT.










Prerequisite for this Example
You must know how handle Swap event on screen, if not read the post How to Detect Left to Right and Right to Left Swap Event

For this Example we need Animation Resources to animate the Screen.

We have used following  Animation in this Example

in_from_left.xml
in_from_right.xml
out_to_left.xml
out_to_right.xml

These animation files must be present in your anim folder.

Create an "anim" folder inside res folder in your application and put all 4 animation files inside anim folder.

in_from_left.xml


<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="-100%" android:toXDelta="0%"
           android:fromYDelta="0%" android:toYDelta="0%"
           android:duration="1400" />
</set>

 in_from_right.xml


<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="100%" android:toXDelta="0%"
           android:fromYDelta="0%" android:toYDelta="0%"
           android:duration="1400" />
</set>

out_to_left.xml


<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
      <translate android:fromXDelta="0%" android:toXDelta="-100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="1400"/>
</set>

out_to_right.xml


<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
      <translate android:fromXDelta="0%" android:toXDelta="100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="1400"/>
</set>

view_flipper_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

        <TextView
            android:layout_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#000099"
            android:textSize="30dp"
            android:text="View Flipper Demo" />

        <ViewFlipper
            android:id="@+id/view_flipper"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_margin="6dip" >
           
        <!--  The child Views/Layout to flip -->
       
        <!--  Layout 1 for 1st Screen -->

            <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="15dp"
                        android:text="This Is Screen 1"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        android:layout_marginTop="15dp"
                        android:id="@+id/imageView1"
                        android:layout_width="450dp"
                        android:layout_height="450dp"
                        android:src="@drawable/image1" />
                   
            </LinearLayout>
           
             <!--  Layout 2 for 2nd Screen -->
           
            <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_marginTop="15dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="This Is Screen 2"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        android:layout_marginTop="15dp"
                        android:id="@+id/imageView1"
                        android:layout_width="450dp"
                        android:layout_height="450dp"
                        android:src="@drawable/image3" />
                   
            </LinearLayout>


        </ViewFlipper>

</LinearLayout>


ViewFlipperMainActivity .java


public class ViewFlipperMainActivity extends Activity
{
            private ViewFlipper viewFlipper;
            private float lastX;

            @Override
            protected void onCreate(Bundle savedInstanceState)
            {
                         super.onCreate(savedInstanceState);
                         setContentView(R.layout.view_flipper_main);
                         viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
            }

           
                       
            // Method to handle touch event like left to right swap and right to left swap
            public boolean onTouchEvent(MotionEvent touchevent)
            {
                         switch (touchevent.getAction())
                         {
                                // when user first touches the screen to swap
                                 case MotionEvent.ACTION_DOWN:
                                 {
                                     lastX = touchevent.getX();
                                     break;
                                }
                                 case MotionEvent.ACTION_UP:
                                 {
                                     float currentX = touchevent.getX();
                                    
                                     // if left to right swipe on screen
                                     if (lastX < currentX)
                                     {
                                          // If no more View/Child to flip
                                         if (viewFlipper.getDisplayedChild() == 0)
                                             break;
                                        
                                         // set the required Animation type to ViewFlipper
                                         // The Next screen will come in form Left and current Screen will go OUT from Right

                                         viewFlipper.setInAnimation(this, R.anim.in_from_left);
                                         viewFlipper.setOutAnimation(this, R.anim.out_to_right);
                                         // Show the next Screen
                                         viewFlipper.showNext();
                                     }
                                    
                                     // if right to left swipe on screen
                                     if (lastX > currentX)
                                     {
                                         if (viewFlipper.getDisplayedChild() == 1)
                                             break;
                                         // set the required Animation type to ViewFlipper
                                         // The Next screen will come in form Right and current Screen will go OUT from Left

                                         viewFlipper.setInAnimation(this, R.anim.in_from_right);
                                         viewFlipper.setOutAnimation(this, R.anim.out_to_left);
                                         // Show The Previous Screen
                                         viewFlipper.showPrevious();
                                     }
                                     break;
                                 }
                         }
                         return false;
            }

 }

ViewFlipper In Android

ViewFlipper In Android


 


New Advance Topics:                   Android LiveWallpaer Tutorial
Android ImageSwitcher                    Android TextSwitcher                                Android ViewFlipper
Android Gesture Detector               Handling/Detecting Swap Events                Gradient Drawable
Detecting Missed Calls                    Hide Title Bar                                           GridView Animation
Android AlarmManager                 Android BootReceiver                       Vibrate Phone In a Desirable Pattern    
Developing for Different Screen Sizes           Showing Toast for Longer Time       Publishing your App
How to publish Android App on Google Play

 Beginning With Android
      Android : Introduction(What is Android)                                                 Configuring Eclipse for Android Development
     Creating Your First Android Project                                           Understanding Android Manifest File of your android app

 Advance Android Topics                                                              Customizing Android Views


Working With Layouts                                                                Working With Views

Understanding Layouts in Android                                                   Using Buttons and EditText in Android
Working with Linear Layout (With Example)                                     Using CheckBoxes in Android
Nested Linear Layout (With Example)                                              Using AutoCompleteTextView in Android                                                                                          Grid View
Relative Layout In Android                                                               ListView
Table Layout                                                                                   Android ProgressBar
Frame Layout(With Example)                                                          Customizing ProgressBar
Absolute Layout                                                                             Customizing Radio Buttons
Grid Layout                                                                                    Customizing Checkboxes In Android

Android Components                                                                 Dialogs In Android

Activity In Android                                                                    Working With Alert Dialog
Activity Life Cycle                                                                    Adding Radio Buttons In Dialog
Starting Activity For Result                                                       Adding Check Boxes In Dialog
Sending Data from One Activity to Other in Android                    Creating Customized Dialogs in Android
Returning Result from Activity                                                   Creating Dialog To Collect User Input
Android : Service                                                                     DatePicker and TimePickerDialog
BroadcastReceiver                                                                   Using TimePickerDialog and DatePickerDialog In android

Menus In Android                                                                ListView:
Creating Option Menu                                                               Populating ListView With DataBase
Creating Context Menu In Android                                              Populating ListView with ArrayList
                                                                                               ListView with Custom Adapter

Toast                                                                                      Working With SMS
Customizing Toast In Android                                                       How to Send SMS in Android
Customizing the Display Time of Toast                                        How To Receive SMS
Customizing Toast At Runtime                                                  Accessing Inbox In Android
Adding Image in Toast
Showing Toast for Longer Time


TelephonyManager                                                            Storage: Storing Data In Android
Using Telephony Manager In Android                                          SharedPreferences In Android
                                                                                              Reading and Writing files to Internal Stoarage

Working With Incoming Calls                                       DataBase :  Introduction of SQLiteDataBase
How To Handle Incoming Calls in Android                                Working With Database in Android
How to Forward an Incoming Call In Android                            Creating Table In Android
CALL States In Android                                                          Inserting, Deleting and Updating Records In Table in Android


Miscellaneous
Notifications In Android
How To Vibrate The Android Phone
Sending Email In Android
Opening a webpage In Browser
How to Access PhoneBook In Android
Prompt User Input with an AlertDialog







20 comments:

  1. Very Nice Post, well explained.

    ReplyDelete
  2. ShowPrevious & ShowNext Should be Reversed...

    ReplyDelete
  3. can you please tell me your references .. really excellent tuts

    ReplyDelete
  4. How to swipe text instead of image? i mean, same scree, different text/sentences.

    ReplyDelete
    Replies
    1. You have to use TextSwitcher to swipe between text. You can read TextSwitcher example at http://learnandroideasily.blogspot.in/2013/06/android-textswitcher.html

      Delete
  5. thank you
    it works for me in my practice work...

    ReplyDelete
  6. thank you
    Can you tell me how to play a video in android?

    ReplyDelete
  7. Really nice tutorial this is !!!

    Only one thing missing, please add following code and then run the application.

    viewFlipper.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
    onTouchEvent(event);
    return false;
    }
    });

    ReplyDelete
    Replies
    1. nice tutorial ! great job!
      i had one problem. the case ACTION_UP was not working on my device. i changed it like that and it is working now:

      case MotionEvent.ACTION_DOWN:
      {
      lastX = event.getX();
      return true;
      }

      after that the ACTION_UP event was working too

      Delete
  8. Easy. Thanks brother!
    But I didn't understand how it is working without handling any event?

    ReplyDelete
  9. great tutorials..thanx for sharing such good blog.

    ReplyDelete
  10. what about adding dots to track the missing slides to go?

    ReplyDelete
  11. Thank you! Really nice! Look at this library - SlidingTutorial

    ReplyDelete