Skip to content
Related Articles

Related Articles

Improve Article

ViewAnimator in Android with Example

  • Difficulty Level : Medium
  • Last Updated : 18 Feb, 2021

ViewAnimator is a very fascinating and useful feature as it switches between two or more views smoothly and mainly meant for animation features of the views on screens. It is the parent class of ViewFlipper and ViewSwitcher and the main distinction is it can switch between more than 2 views also. It is a subclass of FrameLayout Container. Following is the way to define ViewAnimator:

XML




<ViewAnimator
                
    android:id="@+id/simpleViewAnimator1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  
    <!--   You need to add views here  -->
  
</ViewAnimator>

 
Animation means apparently only one view can be active at a moment and hence there are many important methods available to make the flow smooth.

Important Methods

Methods

Description



 showNext()

The name of the method is self-explanatory. This is used to show the 

next view of ViewAnimator. Only one view can be active at the moment.

 showPrevious()

The name of the method is self-explanatory. This is used to show the

 previous view of ViewAnimator. Only one view can be active at the moment.

addView(View child)

At run time, if we want to add a view, we can use this. 

Add the child view at run time in the ViewAnimator.

setInAnimation(in)Set the animation of the appearance of the object on the screen
setOutAnimation(out)

Opposite of  setInAnimation(). The previous one is removed by using

an animation set with the setOutAnimation() method, and then 



places the new one using the animation set by the setInAnimation() method.

 getCurrentView()Currently displayed child view of ViewAnimator.
getDisplayedChild()Index for current displayed child view of ViewAnimator.
getInAnimation()

Current animation used to animate a View that enters the screen 

can be got by this method. This method returns the animation

that we set using the setInAnimation() method.

 getOutAnimation()

Current animation used to animate a View that exits the screen

can be got by this method. This method returns the out animation that we set using setoutAnimation() method.

removeAllViews()To remove all child views from the ViewGroup.
 removeView(View view)

To remove the child view of ViewAnimator. We can do that bypassing the

child view which we want to remove.

removeViewAt(int index)

 If there is a requirement like to remove a view at the specified position

in the group, we can use this.



setDisplayedChild(int whichChild)To set the index of current displayed child view of ViewAnimator
setAnimateFirstView(boolean animate)

The current view should be animated the first time in the ViewAnimator

can be displayed to either true or false value.

getAnimateFirstView()If we have set the current view animated to true/false.

Attributes of ViewAnimator

Attributes

Description

idTo uniquely identify a ViewAnimator.
animateFirstViewIf we want to set the current view as animated, we can have this attribute
inAnimationThe identifier for the animation to use when a view is shown
outAnimationThe identifier for the animation to use when a view is hidden
paddingset the padding from the left, right, the top, or bottom side of a ViewAnimator.

Example

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 
 

ViewAnimator in Android Sample GIF

Step by Step Implementation

Step 1: Create a New Project 

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML




<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">
  
    <ViewAnimator
        android:id="@+id/simpleViewAnimator1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ViewAnimator>
      
    <Button
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:background="#055"
        android:text="NEXT"
        android:textColor="#fff"
        android:textStyle="bold" />
  
</LinearLayout>

 
Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail. 

Kotlin




import android.os.Bundle
import android.view.View
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
import android.widget.ViewAnimator
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
  
    private var simpleViewAnimator1: ViewAnimator? = null
    var buttonNext: Button? = null
  
    // array of images, here taking metal images
    var availableImages = intArrayOf(R.drawable.gold, R.drawable.silver, R.drawable.platinum,
            R.drawable.copper, R.drawable.aluminium)
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // get The references of Button and ViewAnimator
        buttonNext = findViewById<View>(R.id.btnNext) as Button
  
        // get the reference of ViewAnimator
        simpleViewAnimator1 = findViewById<View>(R.id.simpleViewAnimator1) as ViewAnimator
  
        for (i in availableImages.indices) {
            // create a new object  for ImageView by this way
            val imgView = ImageView(applicationContext)
  
            // Let us set image resource for ImageView
            imgView.setImageResource(availableImages[i])
  
            // Then add the child view in ViewAnimator
            simpleViewAnimator1!!.addView(imgView)
        }
  
        // Declare in and out animations and load them using AnimationUtils class
        val animationIn = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left)
        val animationOut = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right)
  
        // set the animation type to ViewAnimator
        simpleViewAnimator1!!.inAnimation = animationIn
        simpleViewAnimator1!!.outAnimation = animationOut
  
        // set false value for setAnimateFirstView, but this is ultimately your choice
        simpleViewAnimator1!!.animateFirstView = false
  
        // Let us write ClickListener for NEXT button
        // The current view will go out and next view will come in with
        // specified animation
        buttonNext!!.setOnClickListener {
            // TODO Auto-generated method stub
            // show the next view of ViewAnimator `     `
            simpleViewAnimator1!!.showNext()
        }
    }
}

Output

Attaching a short video for the above small demo code. Here given 5 different kinds of metals to be available and in each view, we can have one view after another. You can have fun too by having this feature in your android apps.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :