The importance of motion

In yesterday's post I've talked about how keeping motion in mind can highly improve your app game. Animations breathe life into your app, they give it character and can tell a story.

 

While these tips apply to some other fields, such as iOS and Web development, in this post I'm going to talk more in depth about motion in Android.

Animations are literally everything you see changing on screen, everything that isn't static. This gives you thousands of opportunities to improve on how your app feels and what it transmits to the user. 

 

Before talking about where and how to use animations, let's talk about the many ways of implementing them in Android.

There are two ways of making animations in Android, declaring them in your activity or creating a separate XML file. My preferred way of doing this is the XML route, but your milage may vary. They both have their benefits and drawbacks, but I personally like declaring them in XML just because they'll be easier to find later and your code will be much cleaner.

1. How do they work?

The basic principle behind animations is literally just: a start point, an end point and a known duration. You can pretty much animate everything from text to images. From that you can branch out to these 3 different types of animations:

Opacity

Also knows as "alpha", it's role is pretty self explanatory, it controls the transparency of the object at hand. This is pretty useful for when you want to make things appear on screen or go out with a fade effect for example.

Translation

Translation or "movement" basically controls how the object will move on screen on the X and Y axis. 

Scale

Scale pretty much controls the size of the object. You can use it to grow or shrink something on screen.

While you can totally use these separately, they show their real power when used together. The main idea is to mix and match them until you get the desired result. That's when the magic happens.

 

2. How to use them

I told you that there are two ways of implementing animations in Android, declaring them in XML or directly in Java. Here's how to do it:

 

XML way

For this you have to create a new folder called "anim" in your res folder. There you can simply create new XML files. Once you do that you have to simply define the animation. Remember that you can add multiple animations to an XML file, for example combining a translation with an opacity change.

<?xml version="1.0" encoding="utf-8"?>
<set
android:fillAfter="true"
android:fillEnabled="true">

<translate //the type of animation
android:duration="300" //how much time the animation takes
android:fromYDelta="0%"//starting point
android:toYDelta="-150%" />//end point
<alpha
android:duration="300"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>

Also, what fillAfter and fillEnabled does is to preserve the state of the object after the animation, otherwise every time it would finish they would snap back to their original form.

Now that you declared it in XML, simply add this to your Activity:

Animation animation = AnimationUtils.loadAnimation(getContext(), R.anim.animation);

Where animation is the variable's name and R.anim.animation is the path to the XML file you've just created.

To trigger the animation on a specific object type:

textView.startAnimation(animation);

Java method

This method is the least preferred one because it takes up a lot more in your Activity and you can only use it once in that specified Activity. Also you have a lot less control over it. 

final ScaleAnimation anim = new ScaleAnimation(0.0f, 1.0f, 1.0f, 1.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(200);

textView.startAnimation(animation);

3. The real magic

Now, it's cool to use animations separately to animate a button or a transition, but the best way to do it is to chain them up. There's a really neat function in Android called onAnimationListener, what it does, as all the Listeners in Android is to trigger an action every time an animation starts or ends. Now here's how to make one.

 

anim.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
//This is going to trigger at the start of your animation
}

@Override
public void onAnimationEnd(Animation animation) {
//This is going to trigger at the end of your animation
}

@Override
public void onAnimationRepeat(Animation animation) {
//This is going to trigger when your animation repeats itself
}
});

4. Experiment

One of the most important tips I can give you for learning animations, and coding in general is to try doing it yourself, experiment, mix and match until you get what you want, or until you learn something new. Try to find you own ways to do it, search for different sources and come up with something new. Don't forget to have fun in the process.

 

*flies away animation*