Thursday, September 18, 2014

Apply animation on buttons to start activity

Example to apply Animation on Buttons, and implement AnimationListener to startActivity() when onAnimationEnd() called. Notice that when a animation is running, the buttons still can accept click to start other animation, and create more AnimationListener to start more than one second activity when ended. (It's further work on former exercise "Apply animation on Button")


Create animation xml in /res/anim folder.

/res/anim/anim_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha 
        android:fromAlpha="1.0" 
        android:toAlpha="0.1" 
        android:duration="500" 
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>

/res/anim/anim_rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="500"
        android:startOffset="0"
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>

/res/anim/anim_scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:fromXScale="1.0"
        android:toXScale="3.0"
        android:fromYScale="1.0"
        android:toYScale="3.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="500" 
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>

/res/anim/anim_translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
</set>

/res/layout/main.xml, layout of main activity(AndroidAnimButtonsActivity.java).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/translate"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Translate" />
    <Button
        android:id="@+id/alpha"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Alpha" />
    <Button
        android:id="@+id/scale"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Scale" />
    <Button
        android:id="@+id/rotate"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Rotate" />

</LinearLayout>

AndroidAnimButtonsActivity.java
package com.exercise.AndroidAnimButtons;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class AndroidAnimButtonsActivity extends Activity {
 
 static String KEY_ANIM = "TARGET_ANIM";
 static String Target_Translate = "Translate";
 static String Target_Alpha = "Alpha";
 static String Target_Scale = "Scale";
 static String Target_Rotate = "Rotate";
 String target_op = Target_Translate; //dummy default 
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final Animation animTranslate = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
        final Animation animAlpha = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
        final Animation animScale = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
        final Animation animRotate = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
        
        Button btnTranslate = (Button)findViewById(R.id.translate);
        Button btnAlpha = (Button)findViewById(R.id.alpha);
        Button btnScale = (Button)findViewById(R.id.scale);
        Button btnRotate = (Button)findViewById(R.id.rotate);
        
        btnTranslate.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    target_op = Target_Translate;
    arg0.startAnimation(animTranslate);
   }});
        
        btnAlpha.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    target_op = Target_Alpha;
    arg0.startAnimation(animAlpha);
   }});
        
        btnScale.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    target_op = Target_Scale;
    arg0.startAnimation(animScale);
   }});
        
        btnRotate.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    target_op = Target_Rotate;
    arg0.startAnimation(animRotate);
   }});
        
        animTranslate.setAnimationListener(animationListener);
        animAlpha.setAnimationListener(animationListener);
        animScale.setAnimationListener(animationListener);
        animRotate.setAnimationListener(animationListener);
    }
    
    AnimationListener animationListener = new AnimationListener(){

  @Override
  public void onAnimationStart(Animation animation) {
   // TODO Auto-generated method stub
   
  }

  @Override
  public void onAnimationEnd(Animation animation) {
   Intent intent = new Intent(
     AndroidAnimButtonsActivity.this, 
     SecondActivity.class);
        intent.putExtra(KEY_ANIM, target_op);
        startActivity(intent);
  }

  @Override
  public void onAnimationRepeat(Animation animation) {
   // TODO Auto-generated method stub
   
  }};
}

/res/layout/second.xml, layout of the second activity(SecondActivity.java).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/anbutton"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Translate" />

</LinearLayout>

SecondActivity.java
package com.exercise.AndroidAnimButtons;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class SecondActivity extends Activity {

 Animation anim;
 Button anButton;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.second);
  Intent intent = getIntent();
  String op = intent.getStringExtra(AndroidAnimButtonsActivity.KEY_ANIM);
  if (op.equals(AndroidAnimButtonsActivity.Target_Translate)){
   anim = AnimationUtils.loadAnimation(SecondActivity.this, R.anim.anim_translate);
  }else if (op.equals(AndroidAnimButtonsActivity.Target_Alpha)){
   anim = AnimationUtils.loadAnimation(SecondActivity.this, R.anim.anim_alpha);
  }else if (op.equals(AndroidAnimButtonsActivity.Target_Scale)){
   anim = AnimationUtils.loadAnimation(SecondActivity.this, R.anim.anim_scale);
  }else if (op.equals(AndroidAnimButtonsActivity.Target_Rotate)){
   anim = AnimationUtils.loadAnimation(SecondActivity.this, R.anim.anim_rotate);
  }
  
  anButton = (Button)findViewById(R.id.anbutton);
  anButton.setText(op);
  
  anButton.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener(){

   @Override
   public void onGlobalLayout() {

    anButton.startAnimation(anim);
    
    //deprecated in API level 16
    anButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
       //for API Level >= 16
       //anImage.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }});
  
  anButton.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    anButton.startAnimation(anim);
   }});
 }

}

Modify AndroidManifest.xml to add SecondActivity.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.exercise.AndroidAnimButtons"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".AndroidAnimButtonsActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".SecondActivity"
            android:label="@string/app_name" >
        </activity>
    </application>

</manifest>


download filesDownload the files.


No comments: