ZOFTINO.COM

View Animation Effects in Android

Android provides property animation framework using which you can animate properties of any object. In property animation, value of a property is gradually changed from provided start value to end value in specified time duration.

You can find more information about property animation in android animation post.

In this post, I am going to show how to create different animation effects using android property animation framework and TextView as target object.

Color Animation

Animating text color can be done using ObjectAnimator’s ofArgb() method. You need to pass list of colors to be animated through in addition to object and property. In the same way, view’s back ground can be animated. Below code snippet shows how to animate text color and back ground color together using AnimatorSet.

ObjectAnimator anim = ObjectAnimator.ofArgb(textView, "TextColor", Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN);
anim.setDuration(5000);

ObjectAnimator animBgr = ObjectAnimator.ofArgb(textView, "BackgroundColor",  Color.CYAN, Color.GREEN, Color.MAGENTA, Color.BLUE);
animBgr.setDuration(5000);

AnimatorSet animSet = new AnimatorSet();
animSet.play(anim).with(animBgr);
animSet.start();

Shadow Animation

Shadow animation can be achieved by animating elevation property of target view.

ObjectAnimator elevationAnim = ObjectAnimator.ofFloat(textView, "Elevation", 0, 20);
elevationAnim.setDuration(4000);
elevationAnim.start();

Slide Down

Slide down animation can be achieved by animating ScaleY from value 0 to 1.

ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleY", 0, 1);
anim.setDuration(4000);
anim.start();

Slide Up

Slide up animation can be achieved by animating ScaleY from value 1 to 0.

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleY", 1, 0);
anim.setDuration(2000);
anim.start();

Slide In

Slide in animation can be achieved by animating ScaleX from value 1 to 0.

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleX", 1, 0);
anim.setDuration(2000);
anim.start();

Slide Out

Slide Out animation can be achieved by animating ScaleX from value 0 to 1.

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleX", 0, 1);
anim.setDuration(2000);
anim.start();
 

Rotate Animation

Rotate animation can be achieved using RotateAnimation class. RotateAnimation’s constructor takes from degree, to degree, x axis and y axis for rotation of target object. You can specify x axis and y axis type also. Axis type RELATIVE_TO_SELF allows you to specify coordinate values as percentage of width and height of target object, setting the both axis values 0.5 makes target object rotate at center point.To use RotateAnimation, you need to set interpolator and set it to target object by calling startAnimation() method.

 RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setInterpolator(new LinearInterpolator());
rotateAnimation.setDuration(3000);

textView.startAnimation(rotateAnimation);

Rotate Anti Clockwise

To rotate object anti clockwise, you need to set from degree as 360 and to degree as 0.

 RotateAnimation rotateAnimation = new RotateAnimation(360, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setInterpolator(new AccelerateInterpolator());
rotateAnimation.setDuration(3000);

textView.startAnimation(rotateAnimation);

Fade In Animation

Fade animation can be achieved by animating alpha property.

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "Alpha", 0, 1);
anim.setDuration(5000);
anim.start();

Fade Out Animation

Fade out animation can be created by animating alpha property from 1 to 0.

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "Alpha", 1, 0);
anim.setDuration(5000);
anim.start();

Blink Animation

Using alpha property you can create blink animation by setting the duration to few milliseconds and repeating the animation.

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "Alpha", 0, 1);
anim.setRepeatMode(ObjectAnimator.REVERSE);
anim.setRepeatCount(ObjectAnimator.INFINITE);
anim.setDuration(700);
anim.start();

Move Animation

Position of an object can be animated using TranslateAnimation. TranslateAnimation’s constructor takes delta x and delta y values.

 TranslateAnimation translateAnimation = new TranslateAnimation (Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,.85f,
        Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.65f);
translateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
translateAnimation.setDuration(1200);

textView.startAnimation(translateAnimation);

Zoom Out Animation

Zoom animation can be created by using scaleAnimation class. scaleAnimation’s constructor takes from and to scale x and scale y values and pivot x and y values. By setting pivot x and pivot y to center of object and changing scalex and scaley from high values to low values, zoom out animation of target object can be achieved.

 ScaleAnimation scaleAnimation = new ScaleAnimation(1f,0.5f,1f,.50f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleAnimation.setDuration(1800);

textView.startAnimation(scaleAnimation);

Zoom In Animation

By setting pivot x and pivot y to center of object and changing scalex and scaley from low values to high values, zoom in animation of target object can be achieved.

 ScaleAnimation scaleAnimation = new ScaleAnimation(1f,4f,1f,4f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setInterpolator(new LinearInterpolator());
scaleAnimation.setDuration(1800);

textView.startAnimation(scaleAnimation);
 

Bounce Animation

 ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleY", 0, 1);
anim.setInterpolator(new BounceInterpolator());
anim.setDuration(1000);
anim.start();

Animation Complete Code

Animation Activity

 package com.zoftino.animation;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.BounceInterpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;


public class TextViewAnimationActivity extends AppCompatActivity {
    TextView textView ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.textview_animation);

        textView = (TextView)findViewById(R.id.animview);
    }

    public void startAnimation(View view){
        ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "TextScaleX", 0, 4);
        anim.setDuration(1000);
        anim.start();
    }
    public void colorAnimation(View view){
        ObjectAnimator anim = ObjectAnimator.ofArgb(textView, "TextColor", Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN);
        anim.setDuration(5000);

        ObjectAnimator animBgr = ObjectAnimator.ofArgb(textView, "BackgroundColor",  Color.CYAN, Color.GREEN, Color.MAGENTA, Color.BLUE);
        animBgr.setDuration(5000);

        AnimatorSet animSet = new AnimatorSet();
        animSet.play(anim).with(animBgr);
        animSet.start();
    }
    public void shadowAnimation(View view){
        ObjectAnimator elevationAnim = ObjectAnimator.ofFloat(textView, "Elevation", 0, 20);
        elevationAnim.setDuration(4000);
        elevationAnim.start();
    }
    public void slideAnimation(View view){
        ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleX", 0, 1);
        anim.setDuration(2000);
        anim.start();
    }
    public void rotateAnimation(View view){
        RotateAnimation rotateAnimation = new RotateAnimation(360, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        rotateAnimation.setDuration(3000);

        textView.startAnimation(rotateAnimation);
    }
    public void fadeAnimation(View view){
        ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "Alpha", 0, 1);
        anim.setRepeatMode(ObjectAnimator.REVERSE);
        anim.setRepeatCount(ObjectAnimator.INFINITE);
        anim.setDuration(700);
        anim.start();
    }
    public void moveAnimation(View view){
        TranslateAnimation translateAnimation = new TranslateAnimation (Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,.85f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.65f);
        translateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        translateAnimation.setDuration(1200);

        textView.startAnimation(translateAnimation);
    }
    public void zoomAnimation(View view){
        ScaleAnimation scaleAnimation = new ScaleAnimation(1f,4f,1f,4f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setInterpolator(new LinearInterpolator());
        scaleAnimation.setDuration(1800);

        textView.startAnimation(scaleAnimation);
    }
    public void bounceAnimation(View view){
        ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "ScaleY", 0, 1);
        anim.setInterpolator(new BounceInterpolator());
        anim.setDuration(2000);
        anim.start();
    }
}

Animation Layout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.zoftino.animation.TextViewAnimationActivity">

    <TextView
        android:id="@+id/animview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:layout_marginTop="20dp"
        android:textSize="25dp"
        android:text="Animation Examples"></TextView>

    <Button
        android:text="Color Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:onClick="colorAnimation"
        android:id="@+id/button"></Button>
    <Button
        android:text="Shadow Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="shadowAnimation"
        android:id="@+id/button2"></Button>
    <Button
        android:text="Slide Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="slideAnimation"
        android:id="@+id/button3"></Button>
    <Button
        android:text="Rorate Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="rotateAnimation"
        android:id="@+id/butto4"></Button>
    <Button
        android:text="Fade Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="fadeAnimation"
        android:id="@+id/butto5"></Button>
    <Button
        android:text="Move Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="moveAnimation"
        android:id="@+id/butto6"></Button>
    <Button
        android:text="Zoom Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="zoomAnimation"
        android:id="@+id/butto7"></Button>
    <Button
        android:text="Bounce Animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="bounceAnimation"
        android:id="@+id/butto8"></Button>
</LinearLayout>