7 Mar 2016

Animating Android App - Animation Tutorial 01

This is a ready to serve tutorial for learning animations in android applications.You will be able to animate your app right away after  going through this article.If want to learn android animation thoroughly then go by animation documentation by Google.

What will be covered in this tutorial

  1.    animations using ViewPropertyAnimator
  2.    animation using java code
  3.    animation using XML
1.  Using ViewPropertyAnimator

.animate () is an Object of the class ViewPropertyAnimator and very easy to use.There are several properties which can be animated by this function like, alpha, X, Y, rotation etc.
Example, FadeOut a TextView
 myTextView.animate().alpha(0).setDuration(500);

2. Using ObjectAnimator

This animator is used for some more complex animations and also helpful when you want to choreograph the animations.
Example, For transitioningTextView in x-direction.

//ObjectAnimator anim = ObjectAnimator.ofFloat(view,property, startvalue, endValue);
ObjectAnimator anim = ObjectAnimator.ofFloat(myTextView, View.X, 0, 100);
anim.setDuration(1000);
anim.start();

3. Using XML

XMLs are used for simple transformations (position, size, rotation, and transparency).XML file is recommended because of its readability, reusability than hard-coding the animation
Example, For scaling an ImageView
<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
</set>
Now we need to inflate and apply above animation to our ImageView.
//Animation XML is in directory Drawables>anim>scale_anim.xml
ImageView myImageView = (ImageView) findViewById(R.id.myImage);
Animation scaleAnimation= AnimationUtils.loadAnimation(this, R.anim.scale_anim);
myImageView.startAnimation(scaleAnimation);

If you want more in this series let me know through comments.
Did you find this post useful? Let Us know in the comments section below.

0 comments:

Post a Comment