Animating views on the UI

View Animation is the older system and can only be used with views. It is relatively easy to set up and offers enough capabilities to meet many application's needs.

How to do it...

We can add basic animations to simple view operations, such as hide and show. Let's take a look at the following step:

1. This is done by adding the animateLayoutChanges attribute to the XML layout:

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
    android:animateLayoutChanges="true">
   </LinearLayout>

We can also create animations for views by using XML, which can then be used to animate views. Let's take a look at the following steps:

1. This is similar to creating animators, but it works on all versions of Android and resides in the anim resource folder:

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator">
     <scale
       android:fromXScale="1.0"
       android:toXScale="0.0"
       android:fromYScale="1.0"
       android:toYScale="0.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:duration="500"
       android:fillBefore="false"/>
     <rotate
       android:fromDegrees="0"
       android:toDegrees="-45"
       android:toYScale="0.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:duration="500"/>
   </set>

2. To use this animation, we just have to inflate it and start it:

   Animation animation = AnimationUtils.LoadAnimation(
     this, Resource.Animation.hyperspace);
   hyperButton.StartAnimation(animation);
   animation.AnimationEnd += delegate {
     hyperButton.Visibility = ViewStates.Gone;
   };

Animations can be created using code or resource files, but another way is to make use of the fluent API:

• To use the fluent API for animations on newer versions of Android, we can just invoke the Animate() method:

  apiButton.Animate()
    .ScaleX(0.0f)
    .ScaleY(0.0f)
    .SetDuration(500)
    .Rotation(-45f)
    .SetInterpolator(new DecelerateInterpolator());

• As the Animate() method is only available to the later versions, we can make use of the support library to prevent the app from crashing on older devices. Instead, we use the ViewCompat type and invoke the static Animate() method:

  ViewCompat.Animate(apiButton)
    .ScaleX(0.0f)
    .SetDuration(500)
    .Rotation(-45f);

How it works...

A layout animation is an animation that the system runs automatically each time there is a layout configuration change. This easily sets the animateLayoutChanges attribute in the XML layout. This will animate various layout changes, such as adding or removing views.

For more advanced view animations, such as changing position, size, rotation, or transparency, an animation sequence can be defined in a resource file. These files are placed in the anim resource folder. Using animation resource files makes it easier to read and maintain.

The same animations that are performed using the resources can be performed using the fluent API. The method chaining is started by calling the Animate() method on a view. We can then start chaining transformations as well as duration and interpolators. This API is only available on versions of Android above 3.1.

Note

View animations are not applied to the view; the appearance changes, but not any other properties or behaviors.

When using the fluent API to apply animations, we need to make sure that we use the ViewCompat type on Android versions prior to 3.1. When running on older Android versions, no animation will occur, but the app will be prevented from crashing.

It is important to apply the changes of view animations after the animation has completed. Animations are not applied after an animation occurs, and although the view appears to be removed or in a new position, the actual view is still in its original position. This view, although not visible, can still be interacted with and will respond to events as if it were never animated.

There's more...

As an alternative to the StartAnimation() method, we can define a starting time for the animation with the Animation.SetStartTime() method and then assign the animation to the view with the View.Animation property.