Slide animation between views of a ViewFlipper

Question

In an Activity I have the following:

var flipper = FindViewById<ViewFlipper>(Resource.Id.flipper);
flipper.Touch += flipper_Touch;

The basic implementation of the touch handler looks like this:

float oldTouchValue = 0;

void flipper_Touch(object sender, View.TouchEventArgs e)
{
    var flipper = sender as ViewFlipper;
    switch(e.Event.Action)
    {
        case MotionEventActions.Down:
            oldTouchValue = e.Event.GetX();
            break;

        case MotionEventActions.Up:
            float currentX = e.Event.GetX();
            if (oldTouchValue < currentX)
            {
                flipper.ShowNext();
            }
            else if (oldTouchValue > currentX)
            {
                flipper.ShowPrevious();
            }
            break;      
    }
}

This allows me to navigate between the different views but I'd like to make it slide left/right

I've seen some Java examples on how to make it work, but not direct way to translate it to c#.

What's required to make the views slide and is there a way to define the animation in XML?
I'm able to make Activities slide in and out using animations defined in XML and calls to OverridePendingTransition, but I'm not sure how to apply that knowledge here.

Solution 1

This allows me to navigate between the different views but I'd like to make it slide left/right

The ViewFlipper has, through its ViewAnimator class, some methods to set the animation for the in and out actions, setInAnimation() and setOutAnimation(). This are in the Android SDK but should have correspondence in MonoDroid(with which unfortunately I'm not familiar so I could be wrong). In order to have the desired animation simply use the two methods above to set the desired animations(either xml file or programmatically built Animation) and then call the showNext/Previous methods like you currently do.

You even have some slide animation in the Android SDK, but again I don't know if they are present in MonoDroid.

Update: Those methods are indeed available in Monodroid and exposed like this:

//Using one of the built in animations:
flipper.setInAnimation(this, Android.Resource.Animation.SlideInLeft);
flipper.setOutAnimation(this, Android.Resource.Animation.SlideOutRight);

//Using custom animations defined in XML
flipper.setInAnimation(this, Resource.Animation.slide_in_right);
flipper.setOutAnimation(this, Resource.Animation.slide_out_left);

Solution 2

If you want to control ViewFlipper animation through your XML layout file, then add these attributes to the ViewFlipper tag-

    android:inAnimation="@android:anim/slide_out_right"
    android:outAnimation="@android:anim/slide_in_left"

This is a basic example in which the children inside the ViewFlipper slide in and slide out using the default animations provided by android.

You can also provide your own animation files by adding these attributes instead of the ones above-

    android:inAnimation="@anim/slide_in_right"
    android:outAnimation="@anim/slide_in_left"

and then creating these animation files-

In res/anim/slide_in_left.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/decelerate_interpolator" >
        <translate
            android:fromXDelta="0"
            android:toXDelta="-100%p"
            android:duration="500"/>
    </set>

In res/anim/slide_in_right.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/decelerate_interpolator">
        <translate
            android:fromXDelta="100%p"
            android:toXDelta="0"
            android:duration="500"/>
    </set>

If you would like to start this animation automatically, then add-

    android:flipInterval="2000"
    android:autoStart="true"

This will start the animation automatically and flip the images (or your views) in every 2 seconds (2000ms).

Comments

[jmistx]

@Lukesprog Your info made me find what I need in Monodroid. I did not want to post my own answer as I want to mark yours as the answer (don' want to steal it from you) so I edited your answer to include what I've found in MonoDroid, I hope you don't mind. And thnx!

[Zubair Ahmed]

@Lukesprog great answer it worked according to my context. One thing little confusing for me that in flipper OnClickListener I have used flipper.SetInAnimation(this, Android.Resource.Animation.Slide_In_Left); flipper.showNext(); and worked perfectly, now what should I do for flipper.showPrevious();? I am searching for solution without using buttons. Thanks in advance

[user]

@ZubairAhmadKhan I'm not sure I understand your problem. If you want to do flipper.showPrevious() then a button is the way from a user perspective, to go as you used one for the flipper.showNext(). Otherwise how should a user get back?

[Luciano Marqueto]

To built in animations use android.R.anim.slide_in_left in Java

[hardik9850]

@LucianoMarqueto Gives Error saying Unknown animator name: translate, seems it does not work with fragments.