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 ;) ..

About

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.

Project setup

  • 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

  • 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

    alpha

Rotate Animations

  • 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

    Rotate animation

Scale Animations

  • 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

    scale

Translate Animations

  • 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

    translate

Combined 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

    combined

Create a custom animated view element

  • 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

    custom

Tutorial Sources

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

git clone https://github.com/hascode/android-animation-sample

Resources

Article Updates

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