Android wave animation



In the previous tutorial, you learnt how to define the flip animation in xml file and apply the animation to the ImageView widget. In this Android, I am going to show you how to define a wave animation in xml file and set the animation to an ImageView. You can get the wave animation on the ImageView by changing the values of its alpha and scaleY properties.

Now to have a workable example Android application to demonstrate the wave animation on the ImageView, you create a new Android project. Then modify the activity_main.xml file to add an ImageView. See the content of the activity_main.xml below.

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


You will create a xml file called wave.xml in the res/animator folder. In this flip animation, there are three animations are played in a set sequentially. The first animation changes the alpha property�s value from 0.0 to 1.0. It makes the image becomes clearer until it is completely opaque. The second animation changes the value of scaleY property of the ImageView from 1.0 to 0.5 so the image gets smaller. Then the third animation changes the value of scaleY property of the ImageView from 0.5 to 1.0 so the image gets bigger until it reaches its original size. All durations of the animations are set to 2000ms.  

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<objectAnimator
     android:propertyName="alpha"
     android:duration="2000"
     android:valueFrom="0.0"
     android:valueTo="1.0"
     android:valueType="floatType"
     />  
   <objectAnimator
     android:propertyName="scaleY"
     android:duration="2000"
     android:valueFrom="1.0"
     android:valueTo="0.5"
     android:valueType="floatType"
     />  
   <objectAnimator
     android:propertyName="scaleY"
     android:duration="2000"
     android:valueFrom="0.5"
     android:valueTo="1.0"
     />
    

</set>


To apply the wave animation defined in the wave. 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;
   ImageView imgView;
   int imgResources[]={R.drawable.angkorwat, R.drawable.angkorwat1};
   int index=0;
   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.wave);
    set.setTarget(imgView);
    set.start();
    
   }
  
}


Android-wave-animation

Posted by: Dara | post date: 07-11-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.