Animations add some spice to our Android applications and the offered animation framework makes it easy to create custom animations and tweens.

So lets dance around and create some animations ;) ..

There are two ways to create animations – via XML declaration or in a Java class. We’re going to focus on XML declaration – if you’re interested in java based declaration – take a look at the Android JavaDocs and the subclasses of android.view.animation.Animation.

• We are going to load our animations for a textview used in an activity – so set up a new Android project with your IDE..
• Add a TextView to your root.xml

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout android:id="@+id/root"
   android:layout_width="fill_parent" android:layout_height="fill_parent"
   xmlns:android="http://schemas.android.com/apk/res/android">
   <TextView android:id="@+id/animatedText" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:text="@string/hello">
   </TextView>
  </LinearLayout>

• Create a new Activity named AnimationActivity

  package com.hascode.tutorial.android;
   
  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.LinearLayout;
  import android.widget.TextView;
   
  public class AnimationActivity extends Activity {
   /** Called when the activity is first created. */
   @Override public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   final TextView rText = (TextView) findViewById(R.id.animatedText);
   LinearLayout layout = (LinearLayout) findViewById(R.id.root);
   }
  }

• That’s whats my strings.xml looks like

  <?xml version="1.0" encoding="utf-8"?>
  <resources>
   <string name="hello">Visit www.hascode.com!</string>
   <string name="app_name">hasCode.com - Android Animation Sample</string>
  </resources>

• My AndroidManifest.xml looks like this

  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.hascode.tutorial.android"
   android:versionCode="1"
   android:versionName="1.0">
   <application android:icon="@drawable/icon" android:label="@string/app_name">
   <activity android:name=".AnimationActivity"
   android:label="@string/app_name">
   <intent-filter>
   <action android:name="android.intent.action.MAIN" />
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
   </activity>
   </application>
  </manifest>

• Alpha animations allows us to create fade-in/fade-out effects
• All animations are stored in res/anim so we create a new xml file named alpha.xml there

  <?xml version="1.0" encoding="utf-8"?>
  <alpha
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromAlpha="0.0"
   android:toAlpha="0.9"
   android:duration="4000" />

• Change the activity to load the animation from the xml file and start the animation when a click somewhere in the root layout is received

  package com.hascode.tutorial.android;
   
  import android.app.Activity;
  import android.os.Bundle;
  import android.view.View;
  import android.view.View.OnClickListener;
  import android.view.animation.Animation;
  import android.view.animation.AnimationUtils;
  import android.widget.LinearLayout;
  import android.widget.TextView;
   
  public class AnimationActivity extends Activity {
   /** Called when the activity is first created. */
   @Override public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   final Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
   a.reset();
   final TextView rText = (TextView) findViewById(R.id.animatedText);
   
   LinearLayout layout = (LinearLayout) findViewById(R.id.root);
   layout.setOnClickListener(new OnClickListener() {
   @Override public void onClick(View v) {
   rText.startAnimation(a);
   
   }
   });
   
   }
  }

• Thats what the animated TextView looks like
  

  Alpha animation

• Add a new xml file to res/anim named rotate.xml

  <?xml version="1.0" encoding="utf-8"?>
  <rotate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromDegrees="0" android:toDegrees="360" android:toYScale="0.0"
   android:pivotX="40%" android:pivotY="30%" android:duration="4000" />

• Replace the alpha rotation with the new rotation animation in your activity

  final Animation a = AnimationUtils.loadAnimation(this, R.anim.rotate);

• That’s what the rotating TextView looks like
  

  Rotate animation

• Create another XML file in res/anim named scale.xml

  <?xml version="1.0" encoding="utf-8"?>
  <scale xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromXScale="4" android:toXScale="1" android:fromYScale="3"
   android:toYScale="1" android:pivotX="50%" android:pivotY="50%"
   android:duration="4000" />

• Load the animation in your activity

  final Animation a = AnimationUtils.loadAnimation(this, R.anim.scale);

• Watch the results
  

  Scale animation

• Create translate.xml in res/anim

  <?xml version="1.0" encoding="utf-8"?>
  <translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromXDelta="300%" android:toXDelta="0%" android:fromYDelta="300%"
   android:toYDelta="0%" android:duration="6000" android:zAdjustment="bottom" />

• Replace the animation in your activity

  final Animation a = AnimationUtils.loadAnimation(this, R.anim.translate);

• Watch the results
  

  Translate animation

• It is possible to define combined animations using AnimationSets – we’re going to combine all four animation types and define those in res/anim in a file named animation.xml

  <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android">
   <scale android:fromXScale="1.0" android:toXScale="3.0"
   android:fromYScale="1.0" android:toYScale="3.0" android:pivotX="50%"
   android:pivotY="50%" android:fillAfter="false" android:duration="5000" />
   <set>
   <alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromAlpha="0.2" android:toAlpha="1.0" android:duration="3000" />
   <rotate android:fromDegrees="0" android:toDegrees="-360"
   android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%"
   android:startOffset="700" android:duration="4000" />
   <translate android:fromXDelta="100%" android:toXDelta="-20%"
   android:fromYDelta="60%" android:toYDelta="-30%" android:duration="3000"
   android:zAdjustment="bottom" />
   </set>
  </set>

• Load the animation into your activity

  final Animation a = AnimationUtils.loadAnimation(this, R.anim.animation);

• Enjoy ;)
  

  Combined animation

• We are going to create an animated button so we’re just extending android.widget.Button in our class named AnimatedButton and recycle our combined animation ;)

  package com.hascode.tutorial.android;
   
  import android.content.Context;
  import android.view.MotionEvent;
  import android.view.View;
  import android.view.animation.Animation;
  import android.view.animation.AnimationUtils;
  import android.widget.Button;
   
  public class AnimatedButton extends Button {
   
   public AnimatedButton(Context context) {
   super(context);
   final Animation buttonAnimation = AnimationUtils.loadAnimation(
   this.getContext(), R.anim.animation);
   this.setOnTouchListener(new OnTouchListener() {
   
   @Override public boolean onTouch(View v, MotionEvent event) {
   AnimatedButton.this.startAnimation(buttonAnimation);
   return false;
   }
   });
   }
  }

• Now embed the button in an activity

  package com.hascode.tutorial.android;
   
  import android.app.Activity;
  import android.os.Bundle;
  import android.widget.LinearLayout;
   
  public class AnimationActivity extends Activity {
   /** Called when the activity is first created. */
   @Override public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   AnimatedButton button = new AnimatedButton(this);
   button.setText("What a button");
   LinearLayout layout = (LinearLayout) findViewById(R.id.root);
   layout.addView(button);
   }
  }

• This is my res/layout/main.xml

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout android:id="@+id/root"
   android:layout_width="fill_parent" android:layout_height="fill_parent"
   xmlns:android="http://schemas.android.com/apk/res/android">
  </LinearLayout>

• Et là voilà
  

  Custom animation

If you want to play around with the examples above you may download them from my Bitbucket repository or check them out using Mercurial.

hg clone https://bitbucket.org/hascode/android-animation-sample

• Barebonescoder.com: Android development – more animations
• Android DevGuide: Animation Resources
• Android DevGuide: Tween Animation
• developerlife.com: Android Animation Framework
• Android API: Alpha Animation
• Android API: Rotate Animation
• Android API: Scale Animation
• Android API: Translate Animation
• Android DevGuide: Building Custom Components
• hasCode.com channel on YouTube

• 2018-06-01: Embedded YouTube video removed (GDPR/DSGVO).

Tags: activity, Android, animation, component, example, tutorial, tween

This entry was posted on Monday, September 27th, 2010 at 7:30 pm and is filed under Android. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.