Playing around with the Android Animation Framework

September 27th, 2010 by

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

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

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

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

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

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à

Tutorial Sources

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

Resources

Tags: , , , , , ,

22 Responses to “Playing around with the Android Animation Framework”

  1. Shaista Naaz Says:

    good one and easy too.

  2. Xavier Says:

    Hi,

    Thank you for this information, very useful with the videos !

    Link to forum topic (in french sorry ) : http://forum.frandroid.com/topic/49939-textview-anime-vers-le-haut/page__view__findpost__p__818566

    xavier

  3. micha kops Says:

    Merci bien! Je ne sais pas bien parler français – juste un peu :)

  4. Ahmad Shaman Says:

    can a whole activity layout be Animated ?
    Means that when a layout of a new Activity is going to be view, it first show like animation.

  5. Russ Says:

    could you also post the content of the animation.xml file?

  6. micha kops Says:

    Thanks for mentioning! :)
    I’ve also added the source from the tutorial for download.

  7. ajeet Says:

    thank i am very happy with this…

  8. Babu Says:

    Nice tutorial ….

  9. ritesh Says:

    very nice tutorial

  10. Ankit Says:

    Very Good tutorial….

    Thanks…

  11. Nalesh Says:

    thanks, nice tutorial

  12. Manisha Says:

    Thanks….,
    great tutorial

  13. Sam Says:

    Thank you very much. This is very useful.

  14. Sulaiman Khan Says:

    super tutorial ……

    so easy ..to implement

    thanks

  15. ninn Says:

    R.anim
    anim cannot be resolved or is not a field
    how can i fix this problem

  16. micha kops Says:

    the resources in R should be generated automatically .. you shouldn’t use capital letters for the resource in the res/anim directory and your ADT should be able to add the resource to the generated R class.
    Perhaps the following thread on stackoverflow helps you here: http://stackoverflow.com/questions/3296047/android-question-id-cannot-be-resolved-or-is-not-a-field-error

  17. Leonardo Mariga Says:

    Thank you!!!

  18. How to make an image small rather than its original size? | PHP Developer Resource Says:

    [...] good tutorial regarding android animation can be found at: http://www.hascode.com/2010/09/playing-around-with-the-android-animation-framework/#Scale_Animations Tagged: Androidandroid-layoutquestions /* * * CONFIGURATION VARIABLES: EDIT BEFORE [...]

  19. kosh Says:

    I love youuuuuu
    Thanks mate

  20. pradeep Says:

    It an simply super, very useful tut I ever found

    Thanks,
    Pradeep

  21. neha Says:

    Very useful tutorial. Clearing all the concepts. Thank you so much for this tutorial.Looking forward for more tutorial like this on various topics of Android.

  22. raj Says:

    nice job..,
    Thank You!..,

Leave a Reply

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 93,438 bad guys.

Search
Categories