(Android)Flip Animasi

Flip Animasi sering kita temukan pada effect pada desktop atau pun web , teknologi yang digunakan yaitu animation yang sudah di berikan oleh developer android , kita dengan mudah memberikan tata letak yang kita inginkan.

main.xml atau tampilan

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent"
        <RelativeLayout android:layout_width="fill_parent"
                android:layout_height="wrap_content" android:layout_weight="1"
                <ImageView android:id="@+id/imageView2" android:src="@drawable/an"
                        android:layout_height="wrap_content" android:layout_width="fill_parent"
                        android:scaleType="centerInside" android:layout_alignParentBottom="true"
                <ImageView android:id="@+id/imageView1" android:src="@drawable/ab"
                        android:layout_height="wrap_content" android:layout_width="fill_parent"
                        android:scaleType="centerInside" android:layout_alignParentBottom="true"
        <LinearLayout android:layout_width="fill_parent"
                android:layout_height="wrap_content" android:id="@+id/linearLayout1"
                <Button android:text="Animate" android:id="@+id/buttonAnimate"
                        android:layout_width="wrap_content" android:layout_height="wrap_content"


package com.example.flipanimation;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class FlipAnimator extends Animation{
	private Camera camera;

    private View fromView;

    private View toView;

    private float centerX;

    private float centerY;

    private boolean forward = true;

    private boolean visibilitySwapped;

     * Creates a 3D flip animation between two views. If forward is true, its
     * assumed that view1 is "visible" and view2 is "gone" before the animation
     * starts. At the end of the animation, view1 will be "gone" and view2 will
     * be "visible". If forward is false, the reverse is assumed.
     * @param fromView First view in the transition.
     * @param toView Second view in the transition.
     * @param centerX The center of the views in the x-axis.
     * @param centerY The center of the views in the y-axis.
     * @param forward The direction of the animation.
    public FlipAnimator(View fromView, View toView, int centerX, int centerY) {
        this.fromView = fromView;
        this.toView = toView;
        this.centerX = centerX;
        this.centerY = centerY;

        setInterpolator(new AccelerateDecelerateInterpolator());

    public void reverse() {
        forward = false;
        View temp = toView;
        toView = fromView;
        fromView = temp;

    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        camera = new Camera();

    protected void applyTransformation(float interpolatedTime, Transformation t) {
        // Angle around the y-axis of the rotation at the given time. It is
        // calculated both in radians and in the equivalent degrees.
        final double radians = Math.PI * interpolatedTime;
        float degrees = (float) (180.0 * radians / Math.PI);

        // Once we reach the midpoint in the animation, we need to hide the
        // source view and show the destination view. We also need to change
        // the angle by 180 degrees so that the destination does not come in
        // flipped around. This is the main problem with SDK sample, it does not
        // do this.
        if (interpolatedTime >= 0.5f) {
            degrees -= 180.f;

            if (!visibilitySwapped) {

                visibilitySwapped = true;

        if (forward)
            degrees = -degrees;

        final Matrix matrix = t.getMatrix();

        camera.translate(0.0f, 0.0f, (float) (150.0 * Math.sin(radians)));

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);


package com.example.flipanimation;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        final Button buttonAnimate = (Button) findViewById(R.id.buttonAnimate);

        final RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout);

        final ImageView imageViewFlip = (ImageView) findViewById(R.id.imageView2);

        final ImageView imageViewOriginal = (ImageView) findViewById(R.id.imageView1);

        buttonAnimate.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                FlipAnimator animator = new FlipAnimator(imageViewOriginal, imageViewFlip,
                        imageViewFlip.getWidth() / 2, imageViewFlip.getHeight() / 2);
                if (imageViewOriginal.getVisibility() == View.GONE) {

    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;


Published by


hello I am jarcode

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s