ViewFlipper in android

Now that you are ready with Android, one of the first things we try to in Android development is to emulate the graphics effect that have the best applications. So, one of the animations/events mostly used and highly effective is the sliding window from one activity to another by using the fing. To do this we need a little bit of java code and some tips in our XML layout.

Begin from the XML Layout File

Open from res/layout/ the main.xml (or some other layout file) and put this lines:

<ViewFlipper
    android:layout_margin="6dip"
    android:id="@+id/layoutswitcher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:layout_height="wrap_content"
            android:id="@+id/firstpanel"
            android:paddingTop="10dip"
            android:text="my first panel"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:textStyle="bold" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:layout_height="wrap_content"
            android:id="@+id/secondpanel"
            android:paddingTop="10dip"
            android:text="my second panel"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:textStyle="bold" />        
    </LinearLayout>
</ViewFlipper>

As you can see, I add one ViewFlipper, two LinearLayout and for each inner layout asimpletextview, this first step is ncessary to create a proper switching layout, after you can customize as you want the style of the two inner layout and if you want add a toolbar to switch around the inner layout.

Second step: Java Code (Switch Layout by Touch)

Now open your main class from src/ and in the begin of the class declare these two variables:

private ViewFlipper vf;
private float oldTouchValue;

The first Variable (VF) is needed to constrol the ViewFlipper and the second one is needed to the touch event, now attach the viewflipper to the class :

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
....
vf = (ViewFlipper) findViewById(R.id.switchlayout);
}

Now we have a declared viewflipper and can proceed to the last step of this simple tutorial.

The Touch Event

One of the most important feature of this new mobile phone is the Touch Screen system and like iPhone apps or other touching device the user prefer to switch among the activies by their fingers. In Android develpment to attach a touch event you can do two things "implement the touchlistener" or declare am onTouchEvent by overriding the main method.

In this sample we use the second case, take a look of the following code and then to the explaination:

@Override
public boolean onTouchEvent(MotionEvent touchevent) {
switch (touchevent.getAction())
{
case MotionEvent.ACTION_DOWN:
{
oldTouchValue = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP:
{
if(this.searchOk==false) return false;
float currentX = touchevent.getX();
if (oldTouchValue < currentX)
{
vf.setInAnimation(AnimationHelper.inFromLeftAnimation());
vf.setOutAnimation(AnimationHelper.outToRightAnimation());
vf.showNext();
}
if (oldTouchValue > currentX)
{
vf.setInAnimation(AnimationHelper.inFromRightAnimation());
vf.setOutAnimation(AnimationHelper.outToLeftAnimation());
vf.showPrevious();
}
break;
}
}
return false;
}

As you can see, when the user touch for the first time the device a fill the float variable (oldTouchValue) with the X position of his finger, then when the user release his finger I check the new position of the event to decide if the user want to go next or previous ( oldTouchValue <currentX, oldTouchValue > currentX). To change the layout the code is the same but I use different animation if the user want to go next or previous, for more explaining about the animation and the AnimationHelper I put this sample code:

//for the previous movement
public static Animation inFromRightAnimation() {


Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
inFromRight.setDuration(350);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
public static Animation outToLeftAnimation() {
Animation outtoLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
outtoLeft.setDuration(350);
outtoLeft.setInterpolator(new AccelerateInterpolator());
return outtoLeft;
}
// for the next movement
public static Animation inFromLeftAnimation() {
Animation inFromLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
inFromLeft.setDuration(350);
inFromLeft.setInterpolator(new AccelerateInterpolator());
return inFromLeft;
}
public static Animation outToRightAnimation() {
Animation outtoRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
outtoRight.setDuration(350);
outtoRight.setInterpolator(new AccelerateInterpolator());
return outtoRight;
}

You can decide to put these method in a static class (like me) or to declare they in your class.
Download link