Sunday, February 5, 2012

Apply animation on Button

Apply animation on Button


Create four XML files for animation:
/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>


main.xml
<?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="fill_parent"
       android:layout_height="wrap_content"
       android:text="@string/hello" />

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


Main activity:
package com.exercise.AndroidAnimButtons;

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

public class AndroidAnimButtonsActivity extends Activity {
   /** 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) {
   arg0.startAnimation(animTranslate);
  }});
      
       btnAlpha.setOnClickListener(new Button.OnClickListener(){

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

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

  @Override
  public void onClick(View arg0) {
   arg0.startAnimation(animRotate);
  }});
   }
}



Download the files.

Next:
- Handle AnimationListener

Related:
- Start Animation in Activity start

More:
Apply animation on buttons to start activity


9 comments:

Unknown said...

This was a fantastic help. Thanks.

Unknown said...
This comment has been removed by the author.
Anonymous said...

This helped me dude!! thanks for the post.

Ravindra Parihar said...

too much good example thanks

Ronan Clancy said...

how can i make the animation run when the activity is started???

Andr.oid Eric said...

Custom Animation while switching Activity, using overridePendingTransition()

Marija Todorović said...

Thanks!:-)

Anirudh .B.S. said...

You Are Ammmmmazing

behnam ranjbar said...

thank you