How to flip an image in android using animation

Question

I am looking for code to flip an image or a button to show the other side of the image or the button.Basicalyy there are 2 images one shown at a time. On clicking one image it should flip showing the other image,making the first image hidden.I tried some sample applications online,but evrytime i am getting runtime errors.the below given code is one among those.Here there is an image and a button.On clicking the button ,image should flip. I tried this code but I am getting runtime errors.

These are the 2 xml files in the /res/anim folder

to_middle.xml

   <?xml version="1.0" encoding="utf-8"?>
   <scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0" android:toXScale="0.0"
    android:pivotX="50%"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotY="50%"
    android:duration="250" />

from_middle.xml

   <?xml version="1.0" encoding="utf-8"?>
    <scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0" android:toXScale="1.0"
    android:pivotX="50%"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotY="50%"
    android:duration="250" />

this is the activty_main.xml file inside /res/layout/

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation = "vertical"
   android:background="#006600"
   android:gravity = "center">

  <TextView
   android:id="@+id/textView1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Simulated Card Deal"
   android:textColor="#ffffff"
   android:textSize="26sp"
   android:layout_margin="10dip"
   android:textStyle="bold" />

   <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dip"
    android:gravity="center"
    android:src="@drawable/card_back" />

  <Button
   android:id="@+id/button1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_margin="10dip"
   android:padding="10dip"
   android:text="Hit Me!" />
  </LinearLayout>

this is the MainActivity.java file

   package com.example.game5;
   import android.os.Bundle;
   import android.view.View;
   import android.view.View.OnClickListener;
   import android.view.animation.Animation;
   import android.view.animation.Animation.AnimationListener;
   import android.view.animation.AnimationUtils;
   import android.widget.ImageView;
   import android.app.Activity;
    public class MainActivity extends Activity implements OnClickListener,
    AnimationListener {

         private Animation animation1;
         private Animation animation2;
         private boolean isBackOfCardShowing = true;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         animation1 = AnimationUtils.loadAnimation(this, R.anim.to_middle);
         animation1.setAnimationListener(this);
         animation2 = AnimationUtils.loadAnimation(this, R.anim.from_middle);
         animation2.setAnimationListener(this);
         findViewById(R.id.button1).setOnClickListener(this);
        }
   @Override
   public void onClick(View v) {
          v.setEnabled(false);
          ((ImageView)findViewById(R.id.imageView1)).clearAnimation();
          ((ImageView)findViewById(R.id.imageView1)).setAnimation(animation1);
          ((ImageView)findViewById(R.id.imageView1)).startAnimation(animation1);
    }
    @Override
    public void onAnimationEnd(Animation animation) {
          if (animation==animation1) {
                 if (isBackOfCardShowing) {
    ((ImageView)findViewById(R.id.imageView1)).setImageResource(R.drawable.card_front);
                   } else {
    ((ImageView)findViewById(R.id.imageView1)).setImageResource(R.drawable.card_back);
                   }
                   ((ImageView)findViewById(R.id.imageView1)).clearAnimation();
     ((ImageView)findViewById(R.id.imageView1)).setAnimation(animation2);
     ((ImageView)findViewById(R.id.imageView1)).startAnimation(animation2);
             } else {
                    isBackOfCardShowing=!isBackOfCardShowing;
                    findViewById(R.id.button1).setEnabled(true);
             }
    }
    @Override
    public void onAnimationRepeat(Animation animation) {
           // TODO Auto-generated method stub
    }
    @Override
    public void onAnimationStart(Animation animation) {
    // TODO Auto-generated method stub
    }
   }

Application failure detected message appears on the screen on running the application. Please someone help me with this code or suggest appropriate tutorials.Thanks in advance. This is the logcat output

09-20 22:23:55.550: E/AndroidRuntime(1860): FATAL EXCEPTION: main
09-20 22:23:55.550: E/AndroidRuntime(1860): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.game5/com.example.game5.MainActivity}: android.view.InflateException: Binary XML file line #16: Error inflating class android.widget.ImageView
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1647)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1663)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.ActivityThread.access$1500(ActivityThread.java:117)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:931)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.os.Handler.dispatchMessage(Handler.java:99)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.os.Looper.loop(Looper.java:130)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.ActivityThread.main(ActivityThread.java:3683)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at java.lang.reflect.Method.invokeNative(Native Method)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at java.lang.reflect.Method.invoke(Method.java:507)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:880)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:638)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at dalvik.system.NativeStart.main(Native Method)
09-20 22:23:55.550: E/AndroidRuntime(1860): Caused by: android.view.InflateException: Binary XML file line #16: Error inflating class android.widget.ImageView
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.createView(LayoutInflater.java:518)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:568)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.rInflate(LayoutInflater.java:623)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.inflate(LayoutInflater.java:408)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.inflate(LayoutInflater.java:320)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.inflate(LayoutInflater.java:276)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:207)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.Activity.setContentView(Activity.java:1660)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at com.example.game5.MainActivity.onCreate(MainActivity.java:30)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1049)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1611)
09-20 22:23:55.550: E/AndroidRuntime(1860):     ... 11 more
09-20 22:23:55.550: E/AndroidRuntime(1860): Caused by: java.lang.reflect.InvocationTargetException
09-20 22:23:55.550: E/AndroidRuntime(1860):     at java.lang.reflect.Constructor.constructNative(Native Method)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at java.lang.reflect.Constructor.newInstance(Constructor.java:415)
09-20 22:23:55.550: E/AndroidRuntime(1860):     at android.view.LayoutInflater.createView(LayoutInflater.java:505)
09-20 22:23:55.550: E/AndroidRuntime(1860):     ... 22 more

Answer 1

The error occurs when you try to inflate the view. Which means there is something wrong with your XML file. But, everything seems in the right syntax. Make sure all the drawables are there in their respective folders and named correctly.

Also, try cleaning your project. So that a fresh R.java is created.

Happy Coding.:)