ViewAnimator Tutorial With Example In Android Studio

In Android, ViewAnimator is a sub class of FrameLayout container that is used for switching between views. It is an element of transition widget which helps us to add transitions on the views ( like TextView, ImageView or any layout). It is mainly useful to animate the views on screen. ViewAnimator switches smoothly between two or more views and thus provides a way of transitioning from one view to another through appropriate animations.

Important Note:  ViewAnimator is the parent class for ViewFlipper, ViewSwitcher and other views so it perform same operations. It is used for switching between different views.

Basic ViewAnimator XML Code:

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

<!--   Add View’s Here -->

</ViewAnimator>

Steps for Implementation of ViewAnimator:

1. Get the reference of ViewAnimator in class using findViewById() method, or you can also create an object dynamically.
2. Add child views in ViewAnimator using switcherid.addView() method.
3. Set an in-animation using switcherid.setInAnimation().
4. Set an out-animation using switcherid.setOutAnimation().

Important Methods Of ViewAnimator:

Let’s we discuss some important methods of ViewAnimator that may be called in order to manage the ViewAnimator.

1. showNext(): This method is used to show the next view of ViewAnimator. As we discussed earlier ViewAnimator can have two or more child views of which only one is shown at a time, so this method is used to show the next views.

Below we perform click event on button and call showNext() method to show the next view in ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); //get the reference of ViewAnimator

Button btnNext=(Button) findViewById(R.id.buttonNext); //get the reference of Button
// set Click event on next button
btnNext.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
// show the next view of ViewAnimator
simpleViewAnimator.showNext();
}
});

2. showPrevious(): This method is used to show the Previous view of ViewAnimator. As we discussed earlier ViewAnimator can have two or more child views of which only one is shown at a time so this method is used to show the Previous views.

Below we perform click event on button and call showPrevious() method to show the previous view in ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator

Button btnPrevious=(Button) findViewById(R.id.buttonPrevious); // get the reference of Button
// set Click event on next button
btnPrevious.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
// show the next view of ViewFlipper
simpleViewAnimator.showPrevious();
}
});

3. loadAnimation(Context context, int id): This method is used whenever we need to define an object of Animation class through AnimationUtilities class by calling a static method loadAnimation.

Below we create an object of Animation class and load an animation by using AnimationUtils class.

// Load Animation using AnimationUtils class
 Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
 Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

4. setInAnimation(in): This method is used to set the animation of the appearance of the object on the screen.

Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the Animation on ViewAnimator.

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id.simpleViewAnimator); // initiate a ViewAnimator
Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load an animation
simpleViewAnimator.setInAnimation(in); // set in Animation for ViewAnimator

5. setOutAnimation(out): This method does the opposite of setInAnimation(). Whenever we use show the next view, it first removes the old view using an animation set with the setOutAnimation() method, and then places the new one using the animation set by the setInAnimation() method.

Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the out Animation on ViewAnimator

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id. simpleViewAnimator); // get reference of ViewAnimator
Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load an animation
simpleViewAnimator.setOutAnimation(out); // set out Animation for ViewAnimator

6. addView(View child): This method is used to add the child view at run time in the ViewAnimator.

Below we create a new view i.e TextView and then add that view in our ViewAnimator.

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id.simpleViewAnimator); // get reference of ViewAnimator

TextView textView = new TextView(this); // create a TextView
textView.setText("View Animator TextView"); // set text in TextView
simpleViewAnimator.addView(textView); // add the TextView in ViewAnimator

7. getCurrentView(): This method is used for getting the current displayed child view of ViewAnimator.

Below we get the current displayed child view of ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
View view = simpleViewAnimator.getCurrentView(); // get current displayed child view of ViewAnimator

8. getDisplayedChild(): This method is used for getting the index for current displayed child view of ViewAnimator. This method returns an int type value for current displayed child view’s index.

Below we get the index of current displayed child view of ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
int  displayedChildIndex = simpleViewAnimator.getDisplayedChild(); // get index for current displayed child view of ViewAnimator

9. getInAnimation(): This method is used to get the current animation used to animate a View that enters the screen. This method returns the in animation that we set using setInAnimation() method.

Below we firstly set the in animation and then get the current animation that is used to animate a View that enters the screen.

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id.simpleViewAnimator); // initiate a ViewAnimator
Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load an animation
simpleViewAnimator.setInAnimation(in); // set in Animation for ViewAnimator

Animation currentInAnimation=simpleViewAnimator.getInAnimation(); // get current animation that is used to animate a View that enters the screen.

10. getOutAnimation(): This method is used to get the current animation used to animate a View that exits the screen.. This method returns the out animation that we set using setoutAnimation() method.

Below we firstly set the out animation and then get the current animation that is used to animate a View that exits the screen.

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id. simpleViewAnimator); // get reference of ViewAnimator
Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load an animation
simpleViewAnimator.setOutAnimation(out); // set out Animation for ViewAnimator

Animation currentOutAnimation=simpleViewAnimator.getOutAnimation(); // get current animation that is used to animate a View that exits the screen.

11. removeAllViews(): This method is used to remove all child views from the ViewGroup.

Below we remove the all child views from the ViewGroup.

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id. simpleViewAnimator); // get reference of ViewAnimator

simpleViewAnimator.removeAllViews(); // remove all the child views of ViewAnimator

12. removeView(View view): This method is used to remove the child view of ViewAnimator. In this method we pass the object of that child view which we want to remove.

Below we firstly get the current displayed child view of ViewAnimator and then remove that view from the ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
View view=simpleViewAnimator.getCurrentView(); // get current displayed child view of ViewAnimator
simpleViewAnimator.removeView(view); // remove the current displayed child view of ViewAnimator

13. removeViewAt(int index): This method is used to remove the view at the specified position in the group. In this method we pass the index of that child view which we want to remove.

Below we firstly get the index of current displayed child of ViewAnimator and then remove that child view from the ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
int  displayedChildIndex = simpleViewAnimator.getDisplayedChild(); // get index for current displayed child view of ViewAnimator
simpleViewAnimator.removeViewAt(displayedChildIndex); // remove the current displayed child view of ViewAnimator

14. setDisplayedChild(int whichChild): This method is used to set which child view will be displayed in ViewAnimator. In this method we set the index of child view that will be displayed in ViewAnimator.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
simpleViewAnimator.setDisplayedChild(1); // set the indez of current displayed child view of ViewAnimator

15. setAnimateFirstView(boolean animate): This method is used to indicate whether the current view should be animated the first time the ViewAnimator is displayed. In this method we set the true or false value.

Below we set the true value for setAnimateFirstView() method.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
simpleViewAnimator.setAnimateFirstView(true); // set true value for setAnimateFirstView

Using the above code first view will be animated in ViewAnimator. If you change it to false first will not be animated for the first time.

16. getAnimateFirstView(): This method checks whether the current view should be animated the first time the ViewAnimator is displayed. This method returns Boolean type value means true or false.

Below we firstly set the true value for setAnimateFirstView and then checks whether the current view should be animated the first time the ViewAnimator is displayed or not.

ViewAnimator simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
simpleViewAnimator.setAnimateFirstView(true); // set true value for setAnimateFirstView
Boolean isAnimateFirstTime=simpleViewAnimator.getAnimateFirstView(); // checks whether the view should animate first time or not.

Attributes of ViewAnimator:

Now let’s we discuss some common attributes of a ViewAnimator that helps us to configure it in our layout (xml).

1. Id: id attribute is used to uniquely identify a ViewAnimator.

< ViewAnimator

android:id="@+id/simpleViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content" >  <!-- id of the ViewAnimator used to uniquely identify it -->
<!--   Add View’s Here -- >

</ ViewAnimator >

2. animateFirstView: This attribute is used to set the current view should be animated the first time the ViewAnimator is displayed or not. We set Boolean value for this attribute. We can also set value programmatically means in java class using setAnimateFirstView(boolean animate) method.

Below we set the true value for animateFirstView attribute.

<ViewAnimator
android:id="@+id/simpleViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateFirstView="true"> <!--set true value for animateFirstView attribute -->

<!--   Add View’s Here -- >

</ ViewAnimator >

3. inAnimation: This attribute is used as an Identifier for the animation to use when a view is shown.

Below we set the slide in left animation for the inAnimation attribute.

<ViewAnimator
android:id="@+id/simpleViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateFirstView="true"
android:inAnimation="@android:anim/slide_in_left"> <!-- slide in left animation for the child views of ViewAnimator-->

<!--   Add View’s Here -- >

</ ViewAnimator >

4. outAnimation: This method is used as an Identifier for the animation to use when a view is hidden.

Below we set the slide out right animation for the outAnimation attribute.

<ViewAnimator
android:id="@+id/simpleViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateFirstView="true"
android:outAnimation="@android:anim/slide_out_right"> <!-- slide out right animation for the child views of ViewAnimator-->

<!--Add View’s Here-->

</ViewAnimator>

5. padding: This attribute is used to set the padding from left, right, top or bottom side of a ViewAnimator.

• paddingRight: This attribute is used to set the padding from the right side of a ViewAnimator.
• paddingLeft: This attribute is used to set the padding from the left side of a ViewAnimator.
• paddingTop: This attribute is used to set the padding from the top side of a ViewAnimator.
• paddingBottom: This attribute is used to set the padding from the bottom side of a ViewAnimator.
• Padding: This attribute is used to set the padding from the all the side’s of a ViewAnimator.

Below we set the 10dp padding from all the sides of a ViewAnimator

<ViewAnimator
android:id="@+id/simpleViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"> <!-- set 10 dp padding from all the sides of ViewAnimator -->

<!-- Add View’s Here-->

</ViewAnimator>

6. background: This attribute is used to set the background of a ViewFlipper. We can set a color or a drawable in the background of a ViewAnimator.

Below is the example code with explanation included in which we set the red color for the background of a ViewAnimator.

<ViewAnimator
android:id="@+id/simpleViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f00"> <!-- set red color in the background of ViewFlipper -->

<!--   Add View’s Here -- >

</ViewAnimator >

Setting background In ViewAnimator in Java class:

ViewAnimator simpleViewAnimator=(ViewAnimator)findViewById(R.id. simpleViewAnimator); // get reference of ViewAnimator
simpleViewAnimator.setBackgroundColor(Color.RED);// set red color in the background of ViewAnimator

ViewAnimator Examples In Android Studio:

Below is the example of ViewAnimator in which we display a ViewAnimator with five ImageView’s. Firstly we create array of images and add the ImageView’s in ViewAnimator by using addView() method. We also use one Button for switching the view of ViewAnimator.

Firstly we load and set slide in left and slide out right animation on ViewAnimator. Then finally whenever a user click on next button, ViewAnimator switch between the views and the current view will go out and next view will come in with specified animation. We also set the false value for setAnimateFirstView to disable the animation for first view at first time.

Below you can download complete project code, see final output and step by step explanation of the ViewAnimator example:

Download Code ?

Step 1: Create a new project and name it ViewAnimatorExample

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code :

In this step we open an xml file and add the code for displaying two Buttons and ViewAnimator by using its different attributes.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">

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

    </ViewAnimator>


    <Button
        android:id="@+id/buttonNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="150dp"
        android:background="#055"
        android:text="NEXT"
        android:textColor="#fff"
        android:textStyle="bold" />

</LinearLayout>

Step 3: Open   src -> package -> MainActivity.java

In this step we open MainActivity and add the code to initiate the ViewAnimator and Button. In this, firstly we create array of images and add the 5 ImageView’s in ViewAnimator by using addView() method. We also use one Button for switching the view of ViewAnimator.

Here we load and set slide in left and slide out right animation and finally whenever a user click on next button, ViewAnimator switch between the views. We also set the false value for setAnimateFirstView to disable the animation for first view at first time.

package com.example.ip_d.viewanimatorexample;

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.ImageView;
import android.widget.TextView;
import android.widget.ViewAnimator;

public class MainActivity extends AppCompatActivity {

    private ViewAnimator simpleViewAnimator;
    Button btnNext;
    // array of images
    int[] images = {R.drawable.lion, R.drawable.cat, R.drawable.dog, R.drawable.bird1, R.drawable.bird2};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // get The references of Button and ViewAnimator
        btnNext = (Button) findViewById(R.id.buttonNext);
        simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator
        for (int i = 0; i < images.length; i++) {
            ImageView imageView = new ImageView(getApplicationContext()); // create a new object  for ImageView
            imageView.setImageResource(images[i]); // set image resource for ImageView
            simpleViewAnimator.addView(imageView); // add child view in ViewAnimator
        }
        // Declare in and out animations and load them using AnimationUtils class
        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

        // set the animation type to ViewAnimator
        simpleViewAnimator.setInAnimation(in);
        simpleViewAnimator.setOutAnimation(out);

        simpleViewAnimator.setAnimateFirstView(false); // set false value for setAnimateFirstView

        // ClickListener for NEXT button
        // When clicked on Button ViewSwitcher will switch between views
        // The current view will go out and next view will come in with specified animation
        btnNext.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub
                // show the next view of ViewAnimator `     `
                simpleViewAnimator.showNext();
            }
        });

    }

}

Output:

Now run the App and you will see lion image on screen. Now click on NEXT button to switch to the next view in ViewAnimator.

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>