Android View Flipper

1) Create a new Android project. Target any API greater than 1.6.

2) In your /res folder, you’ll need a main.xml layout. Notice how the ViewFlipper control contains two linear layouts; these layouts are what the widget will iterate through when you call the next() and previous() methods in your code. Our layouts are simple and just contain a single text view, but you can use any sort of layouts you need in your application.

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" >

            <com.jitesh.viewflipper.CustomTextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Hi I am Jitesh Upadhyay"

                android:textColor="#114B24"

                android:textSize="14sp"

                android:textStyle="bold" >

            </com.jitesh.viewflipper.CustomTextView>

        </LinearLayout>

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:gravity="center" >

            <com.jitesh.viewflipper.CustomTextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Hope you will like this example"

                android:textColor="#621616"

                android:textSize="14sp"

                android:textStyle="bold" >

            </com.jitesh.viewflipper.CustomTextView>

        </LinearLayout>

    </ViewFlipper>

</LinearLayout>

3) MainActivity.java

package com.jitesh.viewflipper;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.app.Activity;

import android.os.Bundle;

import android.view.MotionEvent;

import android.widget.ViewFlipper;

public class MainActivity extends Activity {

private ViewFlipper vf;

private float lastX;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

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

}

@Override

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;

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

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

return true;

}

}


the CustomTextView .java code is as follows


package com.jitesh.customfonts;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

public class CustomTextView extends TextView {

public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public CustomTextView(Context context) {
super(context);
init();
}

public void init() {

Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/HandmadeTypewriter.ttf");
setTypeface(tf, 1);

}
}

4) Now comes the tricky part. Create a folder called /anim in your /res directory. In the folder, you’ll want to create four XML files to represent the four transitions we’ll require. Spend a few minutes looking at the x delta values, so you’re sure you understand the effect we are hoping to accomplish.

out_to_left.xml

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

android:shareInterpolator="false">

<translate

android:fromXDelta="0%" android:toXDelta="-100%"

android:fromYDelta="0%" android:toYDelta="0%"

android:duration="1400"/>

</set>

out_to_right.xml

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

android:shareInterpolator="false">

<translate

android:fromXDelta="0%" android:toXDelta="100%"

android:fromYDelta="0%" android:toYDelta="0%"

android:duration="1400"/>

</set>

in_from_left.xml

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

android:shareInterpolator="false">

<translate

android:fromXDelta="-100%" android:toXDelta="0%"

android:fromYDelta="0%" android:toYDelta="0%"

android:duration="1400" />

</set>

in_from_right.xml

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

android:shareInterpolator="false">

<translate

android:fromXDelta="100%" android:toXDelta="0%"

android:fromYDelta="0%" android:toYDelta="0%"

android:duration="1400" />

</set>

please click here to download the code ViewFlipper Code