Changing screen with ViewFlipper and Animation

Hello guys, today we are going to see how to change the screen with viewflipper and put animation in it. First of all we create the animation files. The animation files reside in the anim folder in the "res" directory.

Download 

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>

activity_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" >


        <ViewFlipper
            android:id="@+id/view_flipper"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
             >
           
        <!--  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="45dp"
                        android:text="This Is Screen 1"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        
                        android:id="@+id/imageView1"
                        android:layout_width="350dp"
                        android:layout_height="350dp"
                        android:scaleType="fitXY"
                        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_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="45dp"
                        android:text="This Is Screen 2"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        
                        android:id="@+id/imageView3"
                        android:layout_width="350dp"
                        android:layout_height="350dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/image2" />
                   
            </LinearLayout>
            <!--  Layout 3 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="45dp"
                        android:text="This Is Screen 3"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        
                        android:id="@+id/imageView3"
                        android:layout_width="350dp"
                        android:layout_height="350dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/image3" />
                   
            </LinearLayout>
            <!--  Layout 4 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="45dp"
                        android:text="This Is Screen 4"
                        android:textColor="#191975"
                        android:textSize="25dp"
                        android:textStyle="bold" >
                    </TextView>

                    <ImageView
                        
                        android:id="@+id/imageView3"
                        android:layout_width="350dp"
                        android:layout_height="350dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/image4" />
                   
            </LinearLayout>


        </ViewFlipper>

</LinearLayout>

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

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

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

    public boolean onTouchEvent(MotionEvent touchevent) {
        switch (touchevent.getAction()) {

        case MotionEvent.ACTION_DOWN: {
            lastX = touchevent.getX();
            break;
        }
        case MotionEvent.ACTION_UP: {
            float currentX = touchevent.getX();

            if (lastX < currentX) {

                if (viewFlipper.getDisplayedChild() == 0)
                    break;

                viewFlipper.setInAnimation(this, R.anim.in_from_left);
                viewFlipper.setOutAnimation(this, R.anim.out_to_right);
                // Show The Previous Screen
                viewFlipper.showPrevious();
            }

            // if right to left swipe on screen
            if (lastX > currentX) {
                if (viewFlipper.getDisplayedChild() == 3)
                    break;

                viewFlipper.setInAnimation(this, R.anim.in_from_right);
                viewFlipper.setOutAnimation(this, R.anim.out_to_left);
                // Show the next Screen
                viewFlipper.showNext();
            }
            break;
        }
        }
        return false;
    }

}