Instruction Overlay Animation in Xamarin Android

In my last post we talked about adding an instruction overlay (instructables as we call them at Spectafy) to your Xamarin Android app. One way we can improve our instructable is to add animation to the way it exits.

As a reminder, here’s the code we use to dismiss the instructable.

var imageCoachingOverlay = FindViewById<ImageView>(Resource.Id.imageCoachingOverlay);
imageCoachingOverlay.Touch += delegate(object sender, View.TouchEventArgs e)
{
  e.Handled = true;
  imageCoachingOverlay.Visibility = ViewStates.Gone;
 };

Basically we just set the instructable’s visibility to gone which causes it to disappear instantly. We can give the instructable a much more professional look by adding a simple animation that causes the instructable to slide off of the screen.

Adding that effect is as easy as adding 2 lines of code and an animation resource file. Let’s start with the resource file.

Before we can create the animation resource file we need to create an anim folder under our Resources folder (right-click on Resources in the Solution Explorer and choose Add/New Folder).

Solution Exlporer Resources anim folder

Now create a new XML file in the anim folder named left_and_out.xml

  • Visual Studio: right-click on Resources, choose Add/New Item… select XML File as the file type
  • Xamarin Studio:  right-click on Resources, choose Add/New File… select XML in the left pane of the New File dialog and then select Empty XML File in the right pane

The file should now appear in the Solution Explorer…

left_and_out.xml in Resources

In the left_and_out.xml file we describe the animation.

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

In this animation we’re telling Android that we want to translate the X position of the View from it’s current position (0%) to a negative 100% (slide it all of the way left); the animation will take 500 milliseconds to execute.

That XML file takes care of all of the hard work.

To perform the animation, all we have to do is load the animation resource and start it.

imageCoachingOverlay.Touch += delegate(object sender, View.TouchEventArgs e)
{
  var leftAndOut = AnimationUtils.LoadAnimation(this, Resource.Animation.left_and_out);
  imageCoachingOverlay.StartAnimation(leftAndOut);
 
  e.Handled = true;
  imageCoachingOverlay.Visibility = ViewStates.Gone;
};

And now … instead of just disappearing … the instructable slides nicely off to the left.

Advertisements

One thought on “Instruction Overlay Animation in Xamarin Android

  1. Pingback: Screen Size Issues with Instruction Overlays in Xamarin Android | hedgehogjim

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s