Android flip animation

In the previous tutorial, you learnt how to define the slideshow animation in xml file and apply the animation to the ListView widget. In this Android, I am going to show you how to define a flip animation in xml file and set the animation to an ImageView so that an image displayed on the ImageView has the flip animation.

Now to have a workable example Android application to demonstrate the ImageView flip animation, you create a new Android project. Then modify the activity_main.xml file to add an ImageView. Here is the content of the activity_main.xml file after the ImageView was added.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
  
   >

   <ImageView
     android:id="@+id/imageview"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
    android:src="@drawable/angkorwat"
/>
      
</LinearLayout>


Now you create a new xml file the res/animator folder. The file name should be flip.xml. In this flip animation, there are two animations are played in a set sequentially. The first animation changes the rotationY property and the second animation changes the rotationX property of the ImageView. So the image is rotated vertically and then it is rotated horizontally. All durations of the animations are set to 1000ms.  

<?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially" >
<objectAnimator
   android:duration="1000"
   android:propertyName="rotationY"
   android:valueFrom="0"
   android:valueTo="360" >
</objectAnimator>

<objectAnimator
   android:duration="1000"
   android:propertyName="rotationX"
   android:valueFrom="180"
   android:valueTo="0" >
</objectAnimator>

</set>

To apply the flip animation defined in the flip. xml file to the ImageView, in onStart method of the MainActivity class, you need to write code to create a reference to the ImageView, inflate the animation xml file, set target object to the reference of the ImageView, and start the animation.

package com.example.andtip;
import android.animation.AnimatorSet;
import android.animation.AnimatorInflater;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ImageView;
public class MainActivity extends Activity {
   AnimatorSet set;
   protected void onCreate(Bundle savedInstanceState) {
   //TODO Auto-generated method stub
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
     }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.main, menu);
           return true;
   }
   public void onStart(){
      super.onStart();  
      ImageView imgView=(ImageView)findViewById(R.id.imageview);
  
     set = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.flip);
     set.setTarget(imgView);
     set.start();
    
   }
  
}


Android-flip-animation

Posted by: Dara | post date: 07-09-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.