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>

<?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();
           	 
          }
        
      } 
      
      
 

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