Animation code samples

alpha_in.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="1000" />
</set>

alpha_out.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="1000" />
</set>

bottom_slide_in.xml

<?xml version="1.0" encoding="utf-8" ?>
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator">
  <translate android:fromYDelta="100%" android:toYDelta="0%" android:fillAfter="true" android:duration="750"/>
  <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="750" />
</set>

bottom_slide_out.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate android:fromYDelta="0%" android:toYDelta="100%" android:fillAfter="true" android:duration="750"/>
  <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="750" />
</set>

partial_testanim.cs

void RunFinalAnimation()
{
    // uses our custom ViewExtensions.BringViewInWithAnimation with inAnimation
    // defined as inAnimation = AnimationUtils.LoadAnimation(Activity, Resource.Animation.bottom_slide_in);
    relativeLayout.BringViewInWithAnimation(inAnimation);
    
    // 'fluent' animation of an image view. moves it verrtically upwards by 110dip while
    // shrinking it by 10%, over 750ms. Sort of like star wars intro scrolling text
    imgNavBarLogo.Animate()
        .TranslationYBy(-110f)
        .ScaleXBy(-0.1f)
        .ScaleYBy(-0.1f)
        .SetDuration(750)
        .Start();
        
    // fades the textview out to complete transparency over 750ms
    textView.Animate().Alpha(0f).SetDuration(750).Start();
    textView.Visibility = ViewStates.Gone; // yes, we can use WithEndAction too...
    
    // shrinks a cardview vertically, top and bottom squeeze toward middle, as if it's in a vice.
    // ValueAnimator scaleAnimator = ValueAnimator.OfFloat(new[] {1f, 0f});
    // scaleAnimator.SetDuration(2000);
    // scaleAnimator.Update += (sender, args) =>
    //                        {
    //                            cardview.ScaleY = (float) args.Animation.AnimatedValue;
    //                        };
    // scaleAnimator.Start();

    // shrinks a cardview vertically, top stays where it is, bottom moves towards top, kind of like a roll-up
    // ScaleAnimation scale = new ScaleAnimation((float)1.0, (float)1.0, (float)1.0, (float)0.5)
    // {
    //    FillAfter = true,
    //    Duration = 1000,
    // };
    // cardview.StartAnimation(scale);

    // code to get window width just pasted here for clarity
    var size = new Point();
    Activity.WindowManager.DefaultDisplay.GetSize(size);
    windowWidth = size.X;
    
    // slides the cardview off screen, left to right, over 2500ms (takes a while)
    // and then collapses the space it took up 
    cardview.Animate()
        .TranslationXBy(windowWidth)
        .SetDuration(2500)
        .SetStartDelay(3000)
        .WithEndAction(new Runnable(() =>
                                    {
                                        cardview.Visibility = ViewStates.Gone;
                                    }))
        .Start();
}

ViewExtensions.cs

using Android.Content;
using Android.Views;
using Android.Views.Animations;

namespace Mobile.Droid.Extensions
{
  // invoke with anyView.BringViewInWithAnimation/TakeViewOutWithAnimation
  // where animation param is predefined animations from xml, code, etc.
  // e.g. inAnimation = AnimationUtils.LoadAnimation(Activity, Resource.Animation.bottom_slide_in);

    public static class ViewExtensions
    {
        /// <summary>
        /// Bring view on to screen. You may need to enable the 'RunOnUiThread' depending
        /// on where you're calling this from
        /// </summary>
        /// <param name="viewToAnimate">the view</param>
        /// <param name="animation"></param>
        public static void BringViewInWithAnimation(this View viewToAnimate, Animation animation)
        {
            //RunOnUiThread(() =>
            //{
                animation.Interpolator = new OvershootInterpolator(1.0f);
                viewToAnimate.Visibility = ViewStates.Visible;
                viewToAnimate.StartAnimation(animation);
            //});
        }
        
        /// <summary>
        /// Take view out of screen. You may need to enable the 'RunOnUiThread' depending
        /// on where you're calling this from
        /// </summary>
        /// <param name="viewToAnimate">the view</param>
        /// <param name="animation"></param>        
        public static void TakeViewOutWithAnimation(this View viewToAnimate, Animation outAnimation)
        {
            //RunOnUiThread(() =>
            //{
                viewToAnimate.BringToFront();
                outAnimation.Interpolator = new AccelerateInterpolator();
                viewToAnimate.StartAnimation(outAnimation);
                viewToAnimate.Visibility = ViewStates.Gone;
            // });
        }

        /// <summary>
        /// 'Pop' view out from nothing (or whatever you had it scaled to, before)
        /// </summary>
        /// <param name="viewToAnimate">the view</param>
        /// <param name="animation"></param>        
        public static ViewPropertyAnimator WormholeEnter(this View viewToAnimate, float maxScale)
        {
            return viewToAnimate.Animate()
                            .ScaleX(maxScale)
                            .ScaleY(maxScale)
                            .SetDuration(500)
                            .WithEndAction(new Runnable(() => viewToAnimate.Visibility = ViewStates.Visible));
        }

        /// <summary>
        /// View disappears (or visibly shrinks) down to whatever you scale it to, and then disappears.
        /// Designed to pull views off-screen
        /// </summary>
        /// <param name="viewToAnimate">the view</param>
        /// <param name="animation"></param>        
        public static ViewPropertyAnimator WormholeExit(this View viewToAnimate)
        {
            return viewToAnimate.Animate()
                            .ScaleX(0f)
                            .ScaleY(0f)
                            .SetDuration(500)
                            .WithEndAction(new Runnable(() => viewToAnimate.Visibility = ViewStates.Gone));
        }
        
    }
}