Android: Switching screens in an Activity with animations (using ViewFlipper)

how to switch between layers using animations to make it look like you are changing screens… we will be using a ViewFlipper widget in the layout XML.

1. Create a new Android project, unless you already have one

2. Create a new Activity class that extends android.app.Activity.

3. Create a new directory under the /res directory and call it anim

4. Right-click on the new directory called anim and Import all the XML files from: Android_SDK\Platform\android-1.5\samples\ApiDemos\res\anim.

These are animations created using XML. The same animations can be created in code, but these are ready for us to use in XML.

5. Open res\layout\main.xml and copy/paste the following in:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
>

<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"

android:layout_height="fill_parent"
android:background="#ffffff">

<TextView android:id="@+id/tv_country"
android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Country" >

</TextView>
<Spinner android:text=""
android:id="@+id/spinner_country"
android:layout_width="200px"
android:layout_height="55px">

</Spinner>
<Button android:text="Next"
android:id="@+id/Button_next"
android:layout_width="250px"
android:textSize="18px"

android:layout_height="55px">
</Button>
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"

android:layout_height="fill_parent"
android:background="#ffffff">

<TextView android:id="@+id/tv_income"
android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Income" >

</TextView>
<EditText android:text=""
android:id="@+id/et_income"
android:layout_width="200px"
android:layout_height="55px">

</EditText>
<Button android:text="Previous"
android:id="@+id/Button_previous"
android:layout_width="250px"
android:textSize="18px"

android:layout_height="55px">
</Button>
</LinearLayout>

</ViewFlipper>

</LinearLayout>

This is a little long, let’s inspect it more closely.

• The outmost layer is a LinearLayout.
• It contains only one inner layer: ViewFlipper
• The first-level layers inside ViewFlipper will be the screens!
  
  • 
    
    • ViewFlipper contains 2 LinearLayouts. Each LinearLayout is 1 screen.
• The first LinearLayout contains a label, a spinner (a dropdown), and a button
• The second LinearLayout contains a label, an edit view (input box), and a button

6. Here is what Activity1.cs looks like:

package com.warriorpoint.taxman3;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.ViewFlipper;

public class Activity1 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Set main.XML as the layout for this Activity

setContentView(R.layout.main);

// Add a few countries to the spinner
Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_dropdown_item,
new String[] { "Canada", "USA" });
spinnerCountries.setAdapter(countryArrayAdapter);

// Set the listener for Button_Next, a quick and dirty way to create a listener

Button buttonNext = (Button) findViewById(R.id.Button_next);
buttonNext.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);

// Set an animation from res/anim: I pick push left in
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
vf.showNext();
}
});

// Set the listener for Button_Previous, a quick and dirty way to create a listener

Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
buttonPrevious.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: I pick push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
vf.showPrevious();
}

});

}
}

Let’s try and decipher the code:

• First I set the main.xml to be the layout for this Activity
• I input Canada and USA as the values in my dropdown (the Spinner object)
• Then I create two listeners for the two buttons that I have Button_next and Button_previous
• Each button does the following:
  
  • 
    
    • Gets a reference to the ViewFlipper
    • Sets an animation by passing it the context of this class and an animation from a res/anim XML file
    • showNext() or showPrevious() is called – which literally flips between the LinearLayouts in the ViewFlipper widget in the main.xml either forwards or backwards

That’s it! Run it!

Look at that fancy Spinner!

Click Next and watch it flow!

Disclaimer: There is a problem with the back animation when you press “Previous”. It flickers a little and doesn’t flow properly backwards. I still have to figure out why. If anyone knows why, drop me a comment below!

Next up: Removing the “Next” and “Previous” buttons and switching screens by using your finger to drag on the touch screen.