View Flipper in android example

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

The ViewFlipper is a nifty widget that can be used to slide views in and out of the user’s current view port. At times I find it a handy UI replacement for the tab widget (which I’ve stated before I’m not overly fond of). What I like most about the ViewFlipper is the slick user experience. It’s the same sort of effect that is prevalent on Windows Phone 7, and was used by Google to jazz up the latest incarnation of the Android Market.

Despite the widget only recently gaining popularity on Android, it’s been around since version 1.0 of the API. (Read the official ViewFlipper documentation.) However, I don’t think the developer documentation makes it immediately obvious how to use the widget in your applications. In particular, puzzling through the sliding in and out animation transitions can be a little tough. Maybe not as tough as ignoring the candy bowl sitting on my kitchen counter, assuring me no one will notice if I take just one more Laffy Taffy, but still, it requires you to put on your thinking cap. If you’d like to download and import the entire project detailed in this tutorial, you can do so here.

activity_main.xml

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

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="View Flipper Demo" />

<ViewFlipper

android:id="@+id/view_flipper"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_margin="6dip" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="A dog limps into a saloon and says..."

android:textColor="#00ff00"

android:textSize="14sp"

android:textStyle="bold" >

</TextView>

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="I&apos;m looking for the man who shot my paw!"

android:textColor="#00ff00"

android:textSize="14sp"

android:textStyle="bold" >

</TextView>

</LinearLayout>

</ViewFlipper>

</LinearLayout>

MainActivity.java

package com.example.viewflipper;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MotionEvent;

import android.widget.ViewFlipper;

public class MainActivity extends Activity {

private ViewFlipper vf;

private float lastX;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

vf = (ViewFlipper) findViewById(R.id.view_flipper);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

public boolean onTouchEvent(MotionEvent touchevent) {

switch (touchevent.getAction()) {

case MotionEvent.ACTION_DOWN: {

lastX = touchevent.getX();

break;

}

case MotionEvent.ACTION_UP: {

float currentX = touchevent.getX();

if (lastX < currentX) {

if (vf.getDisplayedChild() == 0)

break;

vf.setInAnimation(this, R.anim.in_from_left);

vf.setOutAnimation(this, R.anim.out_to_right);

vf.showNext();

}

if (lastX > currentX) {

if (vf.getDisplayedChild() == 1)

break;

vf.setInAnimation(this, R.anim.in_from_right);

vf.setOutAnimation(this, R.anim.out_to_left);

vf.showPrevious();

}

break;

}

}

return false;

}

}

and Two another animation file;

to create that file first you need to create a new folder into /res named animation and into that you need to create xml files.

in_from_left.xml

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

android:shareInterpolator="false" >

<!--

<translate

android:duration="1400"

android:fromXDelta="-100%"

android:fromYDelta="0%"

android:toXDelta="0%"

android:toYDelta="0%" /> -->

<!-- <scale android:duration="100"

android:fromXScale="100%"

android:fromYScale="0%"

android:repeatMode="reverse"/>

-->

<rotate android:fromDegrees="5"

android:toDegrees="50"

android:duration="5000"/>

</set>

in_from_right.xml

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

android:shareInterpolator="false" >

<translate

android:duration="1400"

android:fromXDelta="100%"

android:fromYDelta="0%"

android:toXDelta="0%"

android:toYDelta="0%" />

</set>

Screen shot

Thanks