ViewAnimator in Android | AndroidMonks

ViewAnimator in Android with Example

ViewAnimator is a Base class of a FrameLayout, which defines the Animation on it when switching between views. ViewAnimator can be altered in order to change the in-Animation and out-Animation of the FrameLayout or defining custom animation to the Views at hand.

We will see, how to create a simple but effective ViewAnimator in Android below.

ViewAnimator – Basic Implementation

We will be using the ViewAnimator tag in our layout like below

<ViewAnimator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/view_animator">
</ViewAnimator>

As always, this View takes the default attributes layout_width and layout_height. You can make use of the attributes of a View or a ViewGroup also. Check here for the list of all the attributes related to it.

Additionally there are some attributes specific to a ViewAnimator, they are as given below.

• android:animateFirstView – This specifies if the view should be animated or not when the view it is displayed for the first time
• android:inAnimation – Specifies the animation to use when the view is shown
• android:outAnimation – Specifies the animation to use when the view is hidden

These are the 3 attributes that are specific to View Animator.

ViewAnimator – Public Methods

There are a list of most used public methods for View Animator. We will see a list of all the important methods below

• getAnimateFirstView() – Returns whether the current View should be animated the first time the ViewAnimator is displayed
• getInAnimation() – Returns the Animation set for current View when it enters the screen
• getOutAnimation() – Returns the Animation that is set for the current View when it exits the screen
• setAnimateFirstView(boolean animate) – Setter method to set the First view to either be animated or not animated
• setInAnimation(Animation inAnimation) – Setter method to give In-Animation to the Current View
• setOutAnimation(Animation inAnimation) – Setter method to give the Out-Animation to the Current View
•  showNext() – Manually shows the next child element.
• showPrevious() – Manually shows the previous child element

These public methods are specific to the ViewAnimator class and is used in our example below. There are other generic method calls with respect to a View, you can check them out here.

Creating a Application with ViewAnimator in Android Studio

We will use the Android Studio IDE to create our next View Animator Application like below. It is important to note that, there are various use cases for a FrameLayout, but seldom do developers tap on to the powerful Base class, ViewAnimator. You can define custom animations also if needed. For now. we will try to define some standard Animations on to the View.

The aim is to create a 3 Child View ViewAnimator with TextView, Button, ImageView in it. The Buttons next and previous will perform the showNext() and showPrevious() operations on them. Check the layout implementation below

Create your layout named view_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ViewAnimator
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/view_animator">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="First View"
            android:textSize="40dp"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/monk"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button View"/>
    </ViewAnimator>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:id="@+id/next"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Previous"
            android:id="@+id/prev"/>
    </LinearLayout>
</LinearLayout>

Once your layout is set, it is time for the Activity. Check the ViewAnimatorActivity.java we have created below.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewAnimator;

public class ViewAnimatorActivity extends AppCompatActivity{
    ViewAnimator viewAnimator;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.view_animator);
        viewAnimator = findViewById(R.id.view_animator);
        Button prev = findViewById(R.id.prev);
        Button next = findViewById(R.id.next);
        Animation inAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
        Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
        viewAnimator.setInAnimation(inAnimation);
        viewAnimator.setOutAnimation(outAnimation);
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewAnimator.showNext();
            }
        });
        prev.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewAnimator.showPrevious();
            }
        });
    }
}

On the out set it is self explanatory, but we have to see how the animation is created. Here, we use the AnimationUtils class and load our Animation. AnimationUtils class contains lot of useful methods. You can check here for the entire list of methods in that class

Once that is done, make sure you have made changes to your Manifest as usual. The resulting Application is like below.

Drop in any comments you have below.

“Learn and Be Curious”