(For more resources on Android, see here.)

Note for developers using versions of Android before 3.0

So far, everything we have learned has been backwards-compatible with previous versions of Android. This will hold true for the first part of this article, but not the second. That is to say that ViewFlippers are backwards-compatible with previous versions of Android, but ValueAnimators and ObjectAnimators are new in version 3.0.

At the time of writing (mid-2011), the Android Compatibility Package does not help with this problem.

Turning pages with a ViewFlipper

ViewFlipper is a neat little wrapper class for applying a page-turning animation to a set of pages. It makes use of the tween animation classes, and extends them with an XML interface.

The ViewFlipper is actually a subclass of something called a ViewAnimator. Do not get confused! A ViewAnimator is a completely different class to a ValueAnimator or an ObjectAnimator, and they are not interchangeable.

Let’s see more.

Time for action – making an interactive book

You have been hired by a children’s book publisher to make an interactive book. The book will teach kindergarten children about different sorts of motion by showing them small animations on the pages.

First up, we will use a ViewFlipper widget to make an animated page-turning interface. What better way to learn about a page-turning widget than by using it to make a book? We will also add some simple pages to test the ViewFlipper, which we can add animations to in some later examples.

1. Create a new Android project with the following settings:
   • Project name: Interactive Book
   • Build target: Android 3.0
   • Application name: Interactive Book
   • Package name: com.packt.animation.interactivebook
   • Activity: InteractiveBook
2. The first thing we will do is to define a layout for our book. We want it to look a little bit like the following screenshot:



3. So let’s begin! Open res/layout/main.xml and create the following layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
  
  android_orientation="vertical"
  android_layout_width="fill_parent"
  android_layout_height="fill_parent">
    <ViewFlipper android_id="@+id/pages"
      android_layout_width="fill_parent"
      android_layout_height="fill_parent"
      android_layout_weight="2">
    </ViewFlipper> 
    <LinearLayout
      android_layout_width="fill_parent"
      android_layout_height="wrap_content"
      android_layout_weight="1"
      android_gravity="center"
    >
      <Button
        android_id="@+id/prev"
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_layout_weight="1"
        android_drawableLeft="@android:drawable/ic_media_previous"
        android_text="Previous" />
      <Button
        android_id="@+id/next"
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_layout_weight="1"
        android_drawableRight="@android:drawable/ic_media_next" 
        android_text="Next" />
    </LinearLayout>
  </LinearLayout>

4. Here we have set up the layout of the application, but we have not yet added any pages. In XML, the pages of the ViewFlipper are created by adding child layouts to ViewFlipper.
5. Firstly, we will want a Drawable, which we can animate. Create a new file in res/drawable called res/drawable/ball.xml and give it the following contents:

<?xml version="1.0" encoding="utf-8"?>
<shape
  
  android_shape="oval" >
  <gradient
    android_startColor="#FFFF0000"
    android_endColor="#FF551010"
    android_angle="270"/>
  <size
    android_height="40dp"
    android_width="40dp"/>
</shape> 

6. This is just an ordinary ShapeDrawable; there’s no special animation and stuff here! We will just use it as a simple ball graphic while we are writing the book. Later on, we will add animation.
7. In main.xml, between the &ltViewFlipper> and </ViewFlipper> tags, add the following new elements: I will intersperse the code with pictures, so that you can see what we are adding as we go along. You should add the XML in order, and use the pictures as a quick guide to get what you want? First, take a look at the following screenshot. This should give you an idea of the structure of the page that we are going to make:



8. Looks simple enough? Let’s write the layout code for it. Remember that this is going between the &ltViewFlipper> and </ViewFlipper> tags.

<LinearLayout
        android_layout_width="fill_parent" 
        android_layout_height="wrap_content"
        android_orientation="vertical">
        <TextView 
          android_layout_width="fill_parent" 
          android_layout_height="wrap_content" 
          android_text="This is a ball.  It is a red ball."
        />
        <ImageView
          android_layout_width="wrap_content"
          android_layout_height="wrap_content"
          android_id="@+id/rollingball"
          android_src="@drawable/ball" 
          android_paddingLeft="60dp"
        />
        <TextView  
          android_layout_width="fill_parent" 
          android_layout_height="wrap_content" 
          android_text=
            "This red ball is rolling.  Watch the red ball roll."
        />
      </LinearLayout>

9. That was page 1, now let us make page 2. It will be laid out like the next screenshot:



10. The layout text that follows should go between the &ltLinearLayout> for page 1 and the </ViewFlipper> tag.

<LinearLayout
        android_layout_width="fill_parent" 
        android_layout_height="wrap_content"
        android_orientation="vertical">
        <TextView 
          android_layout_width="fill_parent" 
          android_layout_height="wrap_content" 
          android_text="Look!  This is a red ball too."
        />
        <ImageView
          android_layout_width="wrap_content"
          android_layout_height="wrap_content"
          android_id="@+id/bouncingball"
          android_src="@drawable/ball" 
          android_paddingLeft="60dp"
        />
        <TextView 
          android_layout_width="fill_parent" 
          android_layout_height="wrap_content" 
          android_text=
          "The ball is bouncing.  See the ball bounce."
        />
      </LinearLayout>

11. Finally, this is what the last page will look like:



12. As you might suppose, the layout that follows goes between page 2 and the </ViewFlipper> tag.

<TextView
        android_layout_width="fill_parent" 
        android_layout_height="wrap_content" 
        android_text="The end.  Now go and tidy your room."
      />

13. Our content pages are defined in XML. Our ViewFlipper is going to treat each of the highest-level elements (the LinearLayout and the TextView) as pages in its layout. In this sense, it works exactly as a FrameLayout would work.
14. Okay, great. If you ran this now, you would be able to see the first page, but we’ve still not connected the page-turning buttons. Let’s do that now. Open up InteractiveBook.java and add the following import declarations:

import android.view.View;
import android.widget.Button;
import android.widget.ViewAnimator;

15. The last one is the most important. As I mentioned earlier, the ViewFlipper is a subclass of ViewAnimator. Seeing, as we don’t need to use any of the methods of the subclass, we are only going to work with its superclass.
16. Now, add the following block of code at the end of onCreate().

final ViewAnimator pages = 
      (ViewAnimator) findViewById(R.id.pages);
    Button prev = (Button) findViewById (R.id.prev);
    Button next = (Button) findViewById (R.id.next);
    prev.setOnClickListener(new View.OnClickListener() {
      public void onClick (View v) {
        pages.showPrevious();
      }
    });
    next.setOnClickListener(new View.OnClickListener() {
      public void onClick(View v) {
        pages.showNext();
      }
    });

17. Here we can see exactly how to write a page-turning control in a ViewFlipper. Simply call pages.showPrevious() or pages.showNext().
18. Build and run your application. You should see that the ViewFlipper turns pages perfectly well now.



19. There’s something missing from this interactive book—the animation between the pages is not very smooth. In fact, all it does is switch between one page and the next. Let’s give it a more natural feel with a page turning animation. In res/anim, create a new XML file called slidein.xml. This will be an ordinary tween animation. We will use this animation to introduce new pages to the screen. Add the following block of code to it:

<?xml version="1.0" encoding="utf-8"?>
<set 
  android_interpolator="@android:anim/decelerate_interpolator">
  <translate
    android_fromXDelta="100%p"
    android_toXDelta="0" 
    android_duration="500"
  />
</set>

20. This means that when the user turns a page, the new page comes across from the right-hand side of the screen, as if they were turning pages in a book (sort of).
21. Now let’s add the opposite effect, by removing the old page from the screen. In res/anim, create another XML file called – you guessed it – slideout.xml. In it, add the following XML:

<?xml version="1.0" encoding="utf-8"?>
<set 
  android_interpolator="@android:anim/accelerate_interpolator">
  <translate
    android_toXDelta="-100%p"
    android_fromXDelta="0" 
    android_duration="500"
  />
</set>

22. As the pages arrive from the right, they also move off to the left.
23. Now we need to add this animation to the ViewFlipper. Open up main.xml again, and add these attributes to our declaration of the ViewFlipper.

<ViewFlipper android_id="@+id/pages"
        android_layout_width="fill_parent"
        android_layout_height="fill_parent"
        android_layout_weight="2"
        android_inAnimation="@anim/slidein" 
        android_outAnimation="@anim/slideout" >

24. Now build and run the interactive book. You will see that your pages now transition smoothly from one to the next.

What just happened?

We created a book-like application that displays several pages of information. We created a new ViewFlipper widget and applied a page-turning animation to it to give it a natural, book-like feel.

For convenience, the animations applied to ViewFlipper will apply to every single page that is contained within it. Remember, you do not need to apply an individual tween to each page in your book. Just adding the inAnimation and outAnimation in your ViewFlipper will be sufficient.

Have a go hero – improving the ViewFlipper

Think about how you would like to turn pages in a book. Perhaps the motion that we created above could be improved in some way.

Edit the slidein.xml and slideout.xml tween animations, and create a new animation of your own invention.