Monday, October 29, 2012

Flip Animation in Android | Flip demo in Android | Flip Animation Example in Android

Hello friends!
Today I am going to share Flip Animation  in android, for this I am using ViewFlipper . Hope it will help you.

1-Print Screen:


2-MainActivity.java

package com.example.flipanimationdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Set main.XML as the layout for this Activity
setContentView(R.layout.main);

// Set the listener for Button_Next, a quick and dirty way to create a
// listener
Button buttonNext = (Button) findViewById(R.id.Button_next);
buttonNext.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);

// Set an animation from res/anim: I pick push left in
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(),
R.anim.left_to_right));
vf.showNext();
}
});

// Set the listener for Button_Previous, a quick and dirty way to create
// a listener
Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
buttonPrevious.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: I pick push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(),
R.anim.right_to_left));
vf.showPrevious();
}

});

}
}


3-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:background="#ffffff"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/details"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

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

            <TextView
                android:id="@+id/tv_city"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="welcome on first page!"
                android:textSize="26dp"
                android:textStyle="bold" >
            </TextView>

            <Button
                android:id="@+id/Button_next"
                android:layout_width="250px"
                android:layout_height="55px"
                android:text="Next"
                android:textSize="18px" >
            </Button>
        </LinearLayout>

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

             <TextView
                android:id="@+id/tv_city"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="welcome on Second page!"
                android:textSize="26dp"
                android:textStyle="bold" >
            </TextView>
            <Button
                android:id="@+id/Button_previous"
                android:layout_width="250px"
                android:layout_height="55px"
                android:text="Previous"
                android:textSize="18px" >
            </Button>
        </LinearLayout>
    </ViewFlipper>
</LinearLayout>

Important: Create anim folder in res folder and add left_to_right.xml and right_to_left.xml

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

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

Thanks!

8 comments:

  1. Great Example Manish
    well here you use ViewFlipper But i Want to start new activity with flip animation

    Intent i = new Intent(Main.this,NewActivity.class);
    startActivtiy(i);

    we start new activity like this but how do we add flip animation on this

    thanks

    ReplyDelete
    Replies
    1. And here we use only one activity and one xml how to work with more activity

      Delete
    2. Hi just use this code on your button click-
      // ==============Setting option clicked
      btnSettings.setOnClickListener(new View.OnClickListener() {
      public void onClick(View v) {
      Intent intent = new Intent(HomePage.this, SettingPage.class);
      startActivity(intent);
      overridePendingTransition(R.anim.left_to_right,
      R.anim.right_to_left);
      }

      });

      And use this project anim for-
      overridePendingTransition(R.anim.left_to_right,
      R.anim.right_to_left);

      Thanks!

      Delete
  2. Thats not flip ..that is slide ..

    ReplyDelete