ViewAnimator in Android with Example
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 |
---|---|
id | To uniquely identify a ViewAnimator. |
animateFirstView | If we want to set the current view as animated, we can have this attribute |
inAnimation | The identifier for the animation to use when a view is shown |
outAnimation | The identifier for the animation to use when a view is hidden |
padding | set 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.
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 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/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.