Android Custom Animations

      No Comments on Android Custom Animations

Hello Folks, Recently I have been writing around Android UI Styling and Design. This is my yet another article on Android UI styling. In this article I will cover how we can create custom animations using pure xml tags. Here is my github repo which contains all the code related to these articles.

Android Animation Types

  1. alpha – visibility of UI element
  2. scale – size of UI element
  3. rotate – rotation of UI element
  4. translate – positioning of UI element

Alpha

Below is an example of fade in animation using <alpha/>

Magic behind the animation

<alpha> : this is a tag to animate the rate of change of visibility of an element.
android:fromAlpha : this defines the initial visibility of the element. 0 means the element is invisible.
android:toAlpha : this attribute defines the time alpha will take to make the element completely visible, more the value lesser the time it will take.
android:interpolator : it controls the rate of change of animation, accelerate_interpolator is a default interpolator defined in android core libs.
android:duration : this attribute defines the total duration of the animation.

Put the above xml code in res/anim/fade_in.xml and use it in the activity as below.

This will make the R.id.element animate as shown below.

Scale

Below xml code creates a scale animation, which will increase the size of element and bring it back to its normal size.

Few of the attributes like duration, we have already covered and it will be same across different kind of animations. Lets discuss the other attributes.

android:fromXScale : this is the initial size of the UI element respective to X axis. 1 means that the initial size will be the actual size of element. Reducing it will make the element smaller.
android:fromYScale : its same as android:fromXScale except the size will change respective to Y axis.
android:pivotX : this is the position from where the size will increase or decrease. 50% means mid value of X axis.
android:pivotY : here 50% means mid value of Y axis.
android:repeatMode : this attribute defines the mode in which the android should repeat the same animation. This is how the element comes back in its normal size after it completes.
android:repeatCount : This defines the number of times animation should repeat. Setting it to -1 will repeat the animation infinitely.
android:toXScale : this attribute defines the size of element till it will animate respective to X axis.
android:toYScale : same as android:toXScale except element will animate respective to Y axis.

Put the above xml code in res/anim/scale.xml and use it in the activity as below.

This will make the R.id.element animate as shown below.

Translate

Here is the code to create translate animation. The translate animation can move the element from one position to another.

android:fromXDelta : this attributes defines the initial position of the element respective to X axis. In the above example we are animating the element from bottom to top, so you will see only Y axis values are non-zero.
android:fromYDelta : this defines the initial position of the element respective to Y axis.
android:toXDelta : if we were animating from left to right or vice versa, we would add some value here and the element would have moved from fromXDelta to toXDelta.
android:toYDelta : this defines the last position of the element where it will rest after animation.
android:interpolator : in this case we are using bounce_interpolator which will give the bouncing effect to the animation.

Put the above xml code in res/anim/translate.xml and use it in the activity as below.

This will make the R.id.element animate as shown below.

Rotate

As the name suggests, it will make the element rotate. Below is an sample animation using rotate tag.

android:fromDegrees : this attribute decides the initial position of rotation of the element. Here 0 means it will start the rotation from the actual position of the element.
android:toDegnrees : define till what angle you want to rotate the element.
android:pivotX : this defines the center of rotation of element respective to X axis.
android:pivotY : this defines the center of rotation of element respective to Y axis.

You are already familiar with the other attributes used in rotation tag.

Put the above xml code in res/anim/rotate.xml and use it in the activity as below.

This will make the R.id.element animate as shown below.

Leave a Reply

Your email address will not be published. Required fields are marked *