Dynamic Animation (Material Design) – Quick Tutorial (Xamarin Android) (Code)

Previously there were only time based animations and people were kind of happy. Then, however, came a big change – material design where everything is so natural, physics based and beautiful. Recreating physics with time based animations is not the best thing to do.

Now there’s finally a support library which adds these beautiful material design animations.

This post contains all the code that’s been written in this YouTube video.

MainActivity.cs

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Views;
using Android.Support.Animation;
using Android.Util;

namespace DynamicAnimationTut
{
    [Activity(Label = "DynamicAnimationTut", MainLauncher = true)]
    public class MainActivity : Activity
    {
        View viewSpring;
        View viewFling;

        bool shouldFlingUpwards = true;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            viewSpring = FindViewById<View>(Resource.Id.view_spring);
            viewFling = FindViewById<View>(Resource.Id.view_fling);

            viewSpring.Click += (o, e) =>
            {
                SpringAnimation springAnim = new SpringAnimation(viewSpring, DynamicAnimation.TranslationY, 0);
                springAnim.Spring.SetStiffness(SpringForce.StiffnessLow);
                springAnim.Spring.SetDampingRatio(SpringForce.DampingRatioHighBouncy);
                springAnim.SetStartVelocity(DpToPx(-2000));
                springAnim.Start();
            };

            viewFling.Click += (o, e) =>
            {
                FlingAnimation flingAnim = new FlingAnimation(viewFling, DynamicAnimation.TranslationY);
                flingAnim.SetStartVelocity(DpToPx(shouldFlingUpwards ? -1500 : 1500));
                //flingAnim.SetFriction(2);
                flingAnim.Start();
                shouldFlingUpwards = !shouldFlingUpwards;
            };
        }

        private float DpToPx(float dp)
        {
            return TypedValue.ApplyDimension(ComplexUnitType.Dip, dp, Resources.DisplayMetrics);
        }
    }
}

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <View
      android:id="@+id/view_spring"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:layout_margin="70dp"
      android:layout_centerVertical="true"
      android:background="#F44336" />
  <View
      android:id="@+id/view_fling"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:layout_margin="70dp"
      android:layout_centerVertical="true"
      android:layout_toRightOf="@id/view_spring"
      android:background="#2196F3" />
</RelativeLayout>