ViewFlipper

             A ViewFlipper is used to animate the movement between 2 or more different views. This is generally used to improve the visual and make the app appear smooth.

So in this post I have created a small and simple app using the ViewFlipper control. The flow of the app is given below –

1) The first screen will have a text indicating the screen on which the user is present and it will have a button through which the user can go to the second screen.

2) When the user clicks on the button in screen 1 the first screen will move to right and the second screen will move in from left.

3) The second screen will be similar to the first screen but the button will redirect the user to the first screen.

If you haven’t got the flow, go to the bottom of the post where I have included the snapshot of the output.

Now lets get on with the coding part. Create a new project, once you have created a new project you need to create a new folder in res (resource) call it anim (you can name the folder anything you like. Here I have named it as anim). In this folder create new xml files which will define the animation of the screen. Create 2 new xml called transition_in_left and transition_out_left.

Ok here I will deviate from the topic a bit, since we need to understand what animation is all about.  As you know animation is making simple transformation or loading of different images to make an object livelier. In android there are 2 kinds of animation \

1) Property Animation – Creates animation by modifying the property of the image.

2) View Animation – Creates animation by showing sequence of image in sequence.

In this post I am using View animation, which in turn has 2 types

1) Tween Animation – Animation by performing series of transformation on an image.

2) Frame Animation – Animation by showing sequence of images in a particular order.

In this post I will be using Tween animation and will use the translate property of it, given below is a very brief description of the same.

It has 4 main elements,

1) alpha – provides fade in and fade out animations.

2) scale – provides the ability to increase or decrease the size.

3) translate – provides the ability to make horizontal or vertical movement.

4) rotate – provides the ability to rotate the image

So open the transition_in_left.xml file and use the code below. The below code will case the screen to move from left to right as you can see the fromdelta value changes from -100% to 0.

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

 android:interpolator="@android:anim/decelerate_interpolator">

<translate

 android:fromXDelta="-100%"

 android:toXDelta="0%"

 android:duration="500" />

</set>

Similarly create open another xml file transition_in_left.xml and add the property as shown below –

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

 android:interpolator="@android:anim/decelerate_interpolator">

<translate

 android:fromXDelta="0%"

 android:toXDelta="100%"

 android:duration="500" />

</set>

Now that we are done with the definition of the animator, lets define the main layout. Open main.xml layout in resà layout folder. Remove the existing text box and add a new textbox which will have a text called “View Flipper Demo”. Then add the fiew flipper such that it spans the entire length and width of the screen. Then add the LinearLayout which will have a text which indicates the screen which you are in and a button which will cause the second screen to appear with animation. Add one more LinearLayout and add the same contents as in screen 1.

With the UI and the animation done, we need to add action part. So go to the src folder and open the java file in it. As you can see the basic features are already present.

We need to bind the viewflipper, buttons , animations and assign action to the buttons. The code below does the same

The below code defines the ViewFlipper and buttons used.

        final ViewFlipper vf=(ViewFlipper) findViewById(R.id.viewFlipper1);

        Button firstScreenButton=(Button) findViewById(R.id.buttonfirstscreen);

        Button secondScreenButton=(Button) findViewById(R.id.buttonsecondscreen);

 

Then you need to define the animations. The below code does the same

        Animation inanimation=AnimationUtils.loadAnimation(this,R.anim.transition_in_left);

        Animation outanimation=AnimationUtils.loadAnimation(this, R.anim.transition_out_left);

 Now we need to assign the animation to in and out movements.

        vf.setInAnimation(inanimation);

        vf.setOutAnimation(outanimation);

  

Since we need the animations to appear when button is clicked we need to assign action to the onClickListener as shown below. In the below code we assign action to button in Screen1.

        firstScreenButton.setOnClickListener(new Button.OnClickListener(){

                   @Override

                   public void onClick(View arg0) {

                   vf.showNext();

                   }});

  

Similarly we need to assign action for the button in screen2.

        secondScreenButton.setOnClickListener(new Button.OnClickListener(){

                   @Override

                   public void onClick(View arg0) {

                   vf.showPrevious();

                   }});

The entire file will look in the snapshot shown below.

Now run the application in an emulator or a device. When the application runs the first screen that appears is given below. 

Click on the button and you can see the screen 1 appears to move out and screen 2 appears to move in from left replacing screen1 as shown below.

Now that you are in screen 2 it will be as shown in the snapshot shown below. Click on the button and it should take you back to the first Screen.